【CSSだけでOK】特定のテキストや文字列を含むidやクラスにスタイルを指定する方法

特定のテキストや文字列を含むidやクラスに対してスタイルを当てる方法について紹介していきたいと思います。

通常、決められたid名やクラス名にスタイルを指定することがあると思います。

ですがある特定の文字列が含まれているクラスに対してスタイルを指定したい場合には下記の方法によって指定することができます。

特定の文言を含むセレクタにスタイルを指定する

div[class^="top"]{color: #eee;}

前方一致は始まりの文字が一致する場合にtrueとなります。

上の例ではクラス名が「top」という文字で始める場合にテキストのカラーを#eeeにするという指定になります。

div[class$="bottom"]{margin: 10px;}

後方一致は終わりの文字が一致する場合にtrueとなります。

上の例ではクラス名の終わりが「 bottom 」という文字列に一致する場合にmarginを10pxにするという指定になります。

div[class*="txt"]{border: solid 1px #000;}

部分一致は特定の文字が含まれている場合にtrueとなります。

上の例ではクラス名に「txt」という文字列が含まれている場合にボーダーを指定します。