☰

¿Ocultar elemento HTML con CSS si tiene texto específico dentro?

tag-icon • tag-icon html css stylish
¿Ocultar elemento HTML con CSS si tiene texto específico dentro?

Es difícil manipular sitios web si no tienen una clase propia para cada elemento.

Por ejemplo, ¿cómo podría ocultar el segundo elemento de este código a continuación?

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

El texto nunca cambia dentro del elemento.

Estoy usando Stylish con Firefox para editar CSS/HTML para sitios web.

Respuesta1

No conozco una forma de usar la lógica (identificar un valor en una etiqueta y hacer algo en particular) usando solo CSS y HTML; necesitarías Javascript o algo similar para esto. Pero si buscas ocultar el segundo elemento p en el bloque de texto, puedes hacerlo usando el selector CSS de tipo enésimo:

Envuelve tus etiquetas p en un div y dale una clase al div.

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


Luego en tu CSS crea un selector como este:

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


Envolver las etiquetas p en un div y usar una clase significa que puedes reutilizar esta función para múltiples bloques de texto en tu página. Si desea cambiar qué línea está oculta, cambie el número después del enésimo hijo y si desea que la página muestre un espacio donde se debe reemplazar la línea display: nonecon visibility: hidden.

información relacionada