☰

HTML-Element mit CSS verbergen, wenn es bestimmten Text enthält?

tag-icon • tag-icon html css stylish
HTML-Element mit CSS verbergen, wenn es bestimmten Text enthält?

Es ist schwierig, Websites zu manipulieren, wenn sie nicht für jedes Element eine eigene Klasse haben.

Wie könnte ich beispielsweise das zweite Element aus dem folgenden Code ausblenden?

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

Der Text innerhalb des Elements ändert sich nie.

Ich verwende Stylish mit Firefox, um CSS/HTML für Websites zu bearbeiten.

Antwort1

Ich kenne keine Möglichkeit, Logik (einen Wert in einem Tag identifizieren und etwas Bestimmtes tun) nur mit CSS und HTML zu verwenden, dafür bräuchte man Javascript oder so etwas. Aber wenn Sie das zweite p-Element im Textblock verbergen möchten, können Sie dies mit dem CSS-Selektor nth-of-type tun:

Packen Sie Ihre p-Tags in ein div und geben Sie dem div eine Klasse.

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


Erstellen Sie dann in Ihrem CSS einen Selektor wie diesen:

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


Wenn Sie die p-Tags in ein div einbinden und eine Klasse verwenden, können Sie diese Funktion für mehrere Textblöcke auf Ihrer Seite wiederverwenden. Wenn Sie ändern möchten, welche Zeile ausgeblendet ist, ändern Sie die Zahl nach dem n-ten Kind, und wenn Sie möchten, dass auf der Seite eine Lücke angezeigt wird, wo die Zeile sein soll, ersetzen Sie sie display: nonedurch visibility: hidden.

verwandte Informationen