2

It's hard to manipulate websites if they don't have own class for each element.

For example, how could I hide the second element from this code below?

<p>
    <p>te</p>
    <p>st</p>
    <p>ing</p>
</p>

The text never changes inside the element.

I'm using Stylish with Firefox to edit the CSS/HTML for websites.

Rookie
  • 1,243

1 Answers1

3

I don't know of a way of using logic (identifying a value in a tag and doing something particular) using just CSS and HTML, you'd need Javascript or some such for this. But if you're looking to hide the second p element in the text block you can do this using the nth-of-type CSS selector:

Wrap your p tags in a div and give the div a class.

<div class="HideChild">
    <p>te</p>
    <p>st</p>
    <p>ing</p>
</div>


Then in your css create a selector like this:

.HideChild p:nth-of-type(2)
{
display: none;
}


Wrapping the p tags in a div and using a class means you can reuse this function for multiple text blocks on your page. If you want to change which line is hidden change the number after nth-child, and if you want the page to show a gap where the line should be replace display: none with visibility: hidden.

CLockeWork
  • 2,167