【CSS】属性セレクタを使って要素を選択するサンプル

      2016/08/15


CSS3になって、属性セレクタでの細かな条件指定が可能になりました。
これにより、例えばimgタグのsrc属性の値をセレクタの条件に指定したりすることもできて、使いやすくなりました。
属性セレクタの指定方法は、いくつかあるので、サンプルとしていくつか残しておきたいと思います。

属性セレクタ

属性セレクタの指定方法

属性と、その値を条件として指定する。
CSS2.1では、条件として、属性値と完全に一致しているもの、という指定しかできなかった。
CSS3では「値の一部に、指定した文字を含んでいるもの」や「指定した文字列で始まるもの」などを指定できるようになっている。

セレクタ 説明
E[attr] attr属性を持つ要素
E[attr="value"] attr属性値がvalueと一致する要素
E[attr~="value"] valueで始まるスペースで区切られた属性値を持つ要素
E[attr|="value"] valueで始まるハイフンで区切られた属性値を持つ要素
E[attr^="value"] attr属性値がvalueで始まる要素
E[attr$="value"] attr属性値がvalueで終わる要素
E[attr*="value"] attr属性値にvalueを含む要素
E[attr operator "value" i] 大文字・小文字を区別せずに比較したい場合、閉じ角括弧の直前にi(Iでも可)を追加する。

【属性セレクタの使用例1】
男性画像にボーダーをつける(src属性値に"_man"を含む要素)

(CSS)
                .wrap img{
                    width: 80px;
                    height: 80px;
                }
                img[src$*="_man"] {
                    border: 5px solid red;
                }
            
(HTML)
		<div class="wrap">
		    <img src="img_sample1.png">
		    <img src="img_sample_man1.png">
		    <img src="img_sample2.gif">
		    <img src="img_sample_man2.gif">
		</div>
		
(実行結果)
サンプル似顔絵女性1
サンプル似顔絵男性1
サンプル似顔絵女性2
サンプル似顔絵男性2

src属性値に"_man"という文字が含まれる画像にのみ、ボーダーが付いていることが確認できた。

【属性セレクタの使用例2】
ファイルの拡張子が".gif"の画像にボーダーをつける(src属性値が".gif"、もしくは".GIF"で終わる要素)

(CSS)
                .wrap img{
                    width: 80px;
                    height: 80px;
                }
                img[src$=&quot;.gif&quot; i] {
                    border: 5px solid red;
                }
            
(HTML)
		<div class="wrap">
		    <img src="img_sample1.png">
		    <img src="img_sample_man1.png">
		    <img src="img_sample2.gif">
		    <img src="img_sample_man2.gif">
		</div>
	    
(実行結果)
サンプル似顔絵女性1
サンプル似顔絵男性1
サンプル似顔絵女性2
サンプル似顔絵男性2

gif画像にのみ、ボーダーが付いていることを確認できた。

まとめ

特定の画像のみを選択したりするのにも重宝しています。
まったく使ったことのない属性セレクタもありますが、全て使いこなす必要はないと思います。
ただ、頭の片隅に入れておくと、いざというとき助かるのではないでしょうか。

 - css , ,