☰

Ocultar o elemento HTML com CSS se houver um texto específico dentro dele?

tag-icon • tag-icon html css stylish
Ocultar o elemento HTML com CSS se houver um texto específico dentro dele?

É difícil manipular sites se eles não possuem classes próprias 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 Firefox para editar CSS/HTML de sites.

Responder1

Não conheço uma maneira de usar lógica (identificar um valor em uma tag e fazer algo específico) usando apenas CSS e HTML, você precisaria de Javascript ou algo parecido para isso. Mas se você deseja ocultar o segundo elemento p no bloco de texto, você pode fazer isso usando o seletor CSS do enésimo tipo:

Envolva 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>


Então no seu css crie um seletor como este:

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


Agrupar as tags p em uma 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 qual linha está oculta, altere o número após o enésimo filho, e se quiser que a página mostre uma lacuna onde a linha deve ser substituída display: nonepor visibility: hidden.

informação relacionada