コンテンツに基づく CSS ルール

CSS を使用して、特定の単語を含むアンカーに個別のスタイルを適用できますか?

回答

残念ながら、純粋な CSS は、コンテンツに基づいて要素をスタイル設定するためのネイティブ ソリューションを提供しません。提案された ':contains' セレクターは、現在の CSS3 セレクター作業草案の一部ではありません。

JavaScript の回避策

この機能を実現するには、JavaScript を使用できます。たとえば、次のコード スニペットは、ドキュメント内のすべてのリンクを反復処理し、コンテンツが文字列「SpecificWord」に一致するアンカーに赤色を適用します。

Array.from(document.links).forEach(link => {
  if (/\bSpecificWord\b/i.test(link.innerHTML)) {
    link.style.color = 'red';
  }
});

このサンプル HTML は、スクリプトの効果を示しています:

SpecificWord
OtherWords

実行すると、最初のアンカーは赤色でスタイル設定されますが、2 番目のアンカーはデフォルトのスタイルを保持します。