コンテンツを再構築中です。

CSS3: クラス・id 名に特定文字列を含む要素を指定する方法

CSS クラス・id 名に規則性があれば正規表現を利用し、特定文字列を対象としたスタイル指定が有効です。
今回は、クラス・id 名に 特定の文字が含まれる要素を指定 する記述方法を説明したいと思います。

目次

目次

  • クラス・id 名に特定文字列を含む要素を指定する方法
  • まとめ

クラス・id 名に特定文字列を含む要素を指定する方法

部分一致

クラス名に 「xxx- が含まれる」 「div 要素」「背景色に red」 を指定する記述は以下のようになります。

[code]
div[class*=”xxx-“] {
background: red;
}
[/code]

前方一致 + 部分一致

クラス名の 「先頭が xxx- で始まる」 「div 要素」「背景色に red」 を指定する記述は以下のようになります。

[code]
div[class^=”xxx-“],
div[class*=” xxx-“] {
background: red;
}
[/code]

基本的に class^=前方一致 により目的は「ほぼ」達成されますが、 div 要素に対し 複数クラスが定義されているケースに対応 するため class*=” xxx-“ の記述(※要先頭半角スペース+文字列)が必須となります。

まとめ

クラスや関数の命名規則に関しては、開発者全員がそれなりにコストをかけてしまう部分です。
それなりに場数を踏めば、既存フレームワークが採用するパターンへと近づいていくものですので、CSS においても最適な名称でコーディングをし、できるだけ少ない行数で、意図したスタイル指定ができるよう心がけましょう。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次