web-dev-qa-db-ja.com

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

特定のWordを含むすべてのアンカーに異なるスタイルを適用したいと思います。純粋なCSSで実行できますか？ CSS3のみであれば問題ありません。

csscss3
34
Tamás Szelei

番号。 :containsはかつて提案されましたが、現在のCSS3セレクターの草案にはありません。

たとえば、次のようなJavaScriptが必要になります。

for (var i= document.links.length; i-->0;)
    if (/\bSpecificWord\b/i.test(document.links[i].innerHTML)
        document.links[i].style.color= 'red';
33
bobince

属性値に一致する を使用できます。カスタムデータ属性を使用すると、必要なものが得られる場合があります。

17
Divya Manian

はい、CSS3には:containsセレクターがあります。

li:contains("special"){text-style: italic;}

このページの1/2について言及されています here

これは jQueryでできること も...

6
Scott Evernden

@bobinceは私を助け、私はこのコードを書きました：

var x = document.getElementsByTagName('TD');
for (var i= x.length; i-->0;)
    if (x[i].innerHTML=='closed')
        x[i].parentNode.style.background= '#FEE';

Some TDの内容が 'closed'の場合、TRの背景色は薄赤色で識別されます。

0
lynx_74

Hitch を使用します。これは小さなJSライブラリです。コンテンツベースのスタイルを任意の要素に簡単に適用できます。多くのオプションがあり、条件付きスタイリングに最適です。

0
Enes