☰

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

tag-icon • tag-icon html css stylish
特定のテキストが含まれている場合、CSS を使用して HTML 要素を非表示にできますか?

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

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

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

要素内のテキストは変更されません。

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

答え1

CSS と HTML だけを使用してロジック (タグ内の値を識別して特定の操作を行う) を使用する方法はわかりません。このためには、Javascript などが必要になります。ただし、テキスト ブロック内の 2 番目の p 要素を非表示にしたい場合は、nth-of-type 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 で囲み、クラスを使用すると、ページ上の複数のテキスト ブロックにこの関数を再利用できます。非表示にする行を変更する場合は、nth-child の後の数字を変更します。また、行の場所にギャップを表示したい場合は、 に置き換えdisplay: noneますvisibility: hidden。

関連情報