Hide HTML element with CSS if it has specific text inside it?

Question

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.

Answer 1

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.