Ocultar elemento HTML com CSS se tiver texto específico dentro dele?

Question

É difícil manipular sites se eles não tiverem uma classe própria para cada elemento.

Por exemplo, como eu poderia ocultar o segundo elemento deste código abaixo?

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

O texto nunca muda dentro do elemento.

Estou usando o Stylish com o Firefox para editar o CSS / HTML para sites.

    

Answer 1

Eu não sei de uma maneira de usar lógica (identificar um valor em uma tag e fazer algo em particular) usando apenas CSS e HTML, você precisaria de Javascript ou algo assim para isso. Mas se você estiver procurando esconder o segundo elemento p no bloco de texto, você pode fazer isso usando o seletor de CSS de tipo diferente:

Agrupe suas tags p em um div e dê uma classe ao div.

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

Em seguida, no seu css, crie um seletor como este:

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

Envolver as tags p em um div e usar uma classe significa que você pode reutilizar essa função para vários blocos de texto em sua página. Se você quiser alterar a linha que está oculta, altere o número depois do n-filho e se deseja que a página mostre uma lacuna onde a linha deve ser substituída por display: none com visibility: hidden .