シェアする

【CSS】属性セレクタの書き方メモ

シェアする

無駄に詳細度を上げない属性セレクタですが、けっこう便利な指定方法があるようなのでメモ。

うまく使えばコードも少なくできそうだし単純に便利。

属性が指定されている要素を指定

 [attr] {property: value;}

使い所がちょっと想像つかないんだけど特定の属性が指定してあればその値は問わない。

属性の値が完全一致する要素を指定

 [attr="name"] {property: value;}

よくある属性セレクタ。

属性の値が部分一致する要素を指定

 [attr*="name"] {property: value;}

classの命名がBEMなどで設計してある場合、特定のelementに共通するスタイルを当てたいときとかに使えそう。

属性の値が前方一致する要素を指定

 [attr^="name"] {property: value;}

これは特定のblockやprefixに共通のスタイルを当てたいとき。

属性の値が後方一致する要素を指定

 [attr$="name"] {property: value;}

特定のmodifierに共通するスタイルとか。