CSS クラス・id 名に規則性があれば正規表現を利用し、特定文字列を対象としたスタイル指定が有効です。
今回は、クラス・id 名に 特定の文字が含まれる要素を指定 する記述方法を説明したいと思います。
INDEX
目次
- クラス・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で共有していただければ幸いです。
