web-dev-qa-db-ja.com

特定のテキストが含まれている場合、CSSでHTML要素を非表示にしますか？

要素ごとに独自のクラスがない場合、Webサイトを操作するのは困難です。

たとえば、以下のコードから2番目の要素を非表示にするにはどうすればよいですか？

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

要素内でテキストが変更されることはありません。

FirefoxでStylishを使用して、WebサイトのCSS/HTMLを編集しています。

htmlcssstylish
1
Rookie

CSSとHTMLだけを使用してロジックを使用する方法（タグ内の値を識別して特定のことを行う方法）がわかりません。これにはJavascriptなどが必要です。ただし、テキストブロックの2番目のp要素を非表示にする場合は、n番目のタイプのCSSセレクターを使用してこれを行うことができます。

Pタグをdivでラップし、divにクラスを与えます。

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


次に、cssで次のようなセレクターを作成します。

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


Pタグをdivでラップし、クラスを使用すると、この関数をページ上の複数のテキストブロックに再利用できます。非表示にする行を変更する場合は、n番目の子の後の番号を変更し、ページに行を置き換える必要があるギャップを表示する場合は、display: none with visibility: hidden。

2
CLockeWork