CSS セレクタ :contains() 解説
2024-09-28
CSS セレクタ「foo that contains bar」の解説
日本語
「foo that contains bar」というCSSセレクタは、要素名「foo」の中で、「bar」というテキストを含む要素を指定します。
具体例
<div class="foo">
<p>This is a paragraph.</p>
<p>This paragraph contains the word "bar".</p>
</div>
上記のHTMLコードで、「foo that contains bar」というセレクタを使用すると、2番目の<p>要素が選択されます。
CSSコード
.foo p:contains("bar") {
color: red;
}
このCSSコードにより、2番目の<p>要素のテキストが赤色になります。
解説
:contains("bar"): 「bar」というテキストを含む要素を指定します。.foo p: 「foo」クラスの要素内の<p>要素を指定します。
注意
- より正確なマッチングが必要な場合は、正規表現を使用する他のセレクタ（例えば、
[attribute*="value"]）を検討してください。 :contains()はブラウザによって実装が異なる場合があります。一部のブラウザでは、大文字小文字を区別します。
<div class="foo">
<p>This is a paragraph.</p>
<p>This paragraph contains the word "bar".</p>
</div>
.foo p:contains("bar") {
color: red;
}
この例では、要素名「foo」の中で、「bar」というテキストを含む<p>要素を指定しています。指定された要素のテキストが赤色になります。
「:contains()」の例
<div>
<p>This is a paragraph.</p>
<p>This paragraph contains the word "bar".</p>
<p>This paragraph contains the word "bar" in uppercase.</p>
</div>
p:contains("bar") {
color: blue;
}
p:contains("BAR") {
color: green;
}
この例では、「:contains()」を使用して、「bar」または「BAR」を含むすべての<p>要素を指定しています。指定された要素のテキストの色がそれぞれ青と緑になります。
- より正確なマッチングが必要な場合は、正規表現を使用する他のセレクタを検討してください。
- 大文字小文字を区別します。
- 「:contains()」は、指定されたテキストを含む要素を指定するCSSセレクタです。
正規表現を使用した属性セレクタ
[attribute*="value"]
このセレクタは、指定された属性名が指定された値を含む要素を指定します。例えば、「bar」というテキストを含む<p>要素を指定するには、次のようにします。
p[textContent*="bar"] {
color: red;
}
この方法は、より正確なマッチングが可能で、大文字小文字を区別しない場合もあります。
JavaScriptによる動的な選択
JavaScriptを使用して、指定されたテキストを含む要素を動的に選択することもできます。例えば、次のコードは、「bar」というテキストを含むすべての<p>要素を取得します。
const elements = document.querySelectorAll("p:contains('bar')");
elements.forEach(element => {
element.style.color = "red";
});
この方法は、複雑な条件や操作が必要な場合に有効です。
css css-selectors
