memocarilog

属性セレクタはhref や type などの属性で指定できるセレクタです。前回の記事「属性セレクタを使って外部リンクにのみアイコンを表示する方法」で、属性セレクタを使って表示を変える方法をかきましたが、個人的に今まで属性セレクタをあまり使用することがなかったので、属性セレクタの使い方をおさらいしてみました。

IE8以上で使用可能な CSS3 属性セレクタの使い方

E[foo^=”value”]

→ foo という属性の “value” で始まる値のE要素を指定。

例）img 要素の src 属性の始まりが “http://memocarilog” の要素にボーダーをつける。

<img src="https://memocarilog.info/wp-content/uploads/2012/07/neko2.jpg" alt="">
<img src="http://33.media.tumblr.com/1eb5d11b7aac5e906c95a3eb471e87b3/tumblr_n9011fHOdu1qbo2b6o1_500.jpg" alt="">
<img src="http://38.media.tumblr.com/tumblr_lvqrdmn5Av1qaoyyso1_500.jpg" alt="">

img[src^="http://memocarilog"]{ border:solid 2px red; }

See the Pen pzvgq by Saomocari (@Saomocari) on CodePen.

E[foo$=”value”]

→ foo という属性の “value” で終わる値のE要素を指定。

例）href 属性の最後が “ne.jp/”で終わっているa要素を赤にする。

<a href="https://www.google.co.jp/">google</a>
<a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a>
<a href="http://b.hatena.ne.jp/">はてなブックマーク</a>

a[href$="ne.jp/"]{ color:red; }

See the Pen CbtuH by Saomocari (@Saomocari) on CodePen.

E[foo*=”value”]

→ foo という属性の値に “value” という文字列が含まれるE要素を指定。

例）img 要素の src 属性の中に “tumblr” と入るものにボーダーを付ける。

<img src="https://memocarilog.info/wp-content/uploads/2012/07/neko2.jpg" alt="">
<img src="http://33.media.tumblr.com/1eb5d11b7aac5e906c95a3eb471e87b3/tumblr_n9011fHOdu1qbo2b6o1_500.jpg" alt="">
<img src="http://38.media.tumblr.com/tumblr_lvqrdmn5Av1qaoyyso1_500.jpg" alt="">

img[src*="tumblr"]{ border:solid 1px red; }

See the Pen nwlJx by Saomocari (@Saomocari) on CodePen.

IE7以上で使える CSS2 属性セレクタの使い方

CSS2 で定義されている属性セレクタはIE7以上で使用することができます。

E[foo]

→ foo という属性を持つE要素を指定する。

例）li要素で class 指定があるものの文字色を赤にする。

<ul>
    <li>list1</li>
    <li>list2</li>
    <li class="test">list3</li>
</ul>

li[class]{ color:red; }

See the Pen wEBlq by Saomocari (@Saomocari) on CodePen.

E[foo=”value”]

→ foo という属性で値が”value” と同じE要素を指定。

例）type 属性が “text” になっている input 要素の背景をグレーにする。

<form action="">
    <input type="text">
    <input type="email">
    <input type="search">
</form>

input[type="text"] { background:#ccc; }

See the Pen eypJA by Saomocari (@Saomocari) on CodePen.

E[foo~=”value”]

→ foo という属性で、スペースで区切りの複数の値のうち1つが “value” の属性値のE要素を指定。

例）複数の data 属性のうち、”example2″ という値をもつ li 要素の色を赤にする。

<ul>
    <li>list1</li>
    <li data="example1 example2">list2</li>
    <li data="example3">list3</li>
</ul>

li[data~="example2"]{ color:red; }

See the Pen nyCsA by Saomocari (@Saomocari) on CodePen.

E[foo|=”value”]

→ foo という属性のハイフン区切りの項目のうち1つが “value” の属性のE要素を指定。言語のサブコードの指定に使える。

例）lang 属性に “en” が入っている li 要素を赤にする。

<ul>
    <li lang="en-gb">list1</li>
    <li lang="en-us en-au en-nz">list2</li>
    <li lang="pt">list3</li>
</ul>

li[lang|="en"]{ color:red; }

See the Pen lbCnK by Saomocari (@Saomocari) on CodePen.

注意点

HTML 4/5 では大文字小文字は区別しませんが、XHTML では大文字小文字を区別するため、属性名と値の大文字小文字をまちがえないようにしなくてはいけません。

CSS3 から属性値の一部一致や開始が一致などの正規表現的な便利な使い方ができるようになり、IE8以上でも使えることからこれから出番が増えて来そうですね。