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

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

目次

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

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

部分一致

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

div[class*="xxx-"] {
    background: red;
}

前方一致 + 部分一致

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

div[class^="xxx-"],
div[class*=" xxx-"] {
    background: red;
}

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

まとめ

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

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

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents