属性セレクタの指定方法

※過去ブログの転記

 

普段は適当なclass名をつけて 親 子or孫 {...} 形式でばかり書いているので属性セレクタの種類についてまとめてみた

セレクタ 対象
E[attr] 指定された属性を持つ要素
E[attr="val"] 属性の値が一致する要素
E[attr*="val"] 指定した値の部分一致(アスタリスク)
E[attr^="val"] 指定した値の前方一致(キャレット)
E[attr$="val"] 指定した値の後方一致(ドル)
E[attr~="val"] 複数区切りの中に指定した値が含まれている要素に対して適用(チルダ)
(ex. class="aaa bbb)
E[attr|="val"] -(ハイフン)を区切りとして指定した値のプレフィックスがついているものに対して適用(パイプライン)
(ex. class="val-aaa")
E[attr="val"i] 閉じタグ直前にiを入れると値の大文字小文字を区別しない

最後2つはこの記事書くまで知らなかった。便利

参考

developer.mozilla.org