属性セレクターってのもあるよ。（CSS おれおれ Advent Calendar 2012 – 09日目）

CSS おれおれ Advent Calendar 2012 – 09日目

CSSのセレクターっていうと要素、クラス、IDでの選択が一般的で、あとは:hoverとかの疑似クラスがあるような感じですが、加えて「属性セレクター」ってのがありマウス。

属性セレクター？

要素の検索の条件に、その要素が持つ属性を指定するものです。優先順位はクラスセレクターと同じです。

IEは7から利用できます。

「属性」はわかりますか。HTMLの、タグの中に書くやつです。

<input type="text" name="id" value="" maxlength="8" size="8" />

このうちinputが要素名で、type="text", name="id", value="", maxlength="8", size="8"なんてのが属性です。また左側typeが属性名、右側textが属性値です。

属性セレクターの書き方

何パターンかあります。

属性が付いているもの [att]

属性を持っている事だけが条件です。値は何でも構いません。

例えばmaxlengthの指定があるものだけ背景色を変える場合、以下のように書きます。

[maxlength] {
  background-color: #fee;
}

属性値が指定のもの [att=val]

属性が指定の値を与えられている場合です。

以下はname="id"の要素だけ太字にする例です。

[name=id] {
  font-weight: bold;
}

空白区切りの属性値が指定のものを含む [att~=val]

classのように、空白文字（スペースや改行など）で区切って複数の値を設定できるような場合、そのいずれかに一致する要素を選択します。

例えばリンクのa要素のrel属性なんかも空白区切りですね。リンク先の情報を与える事ができます。

次ページへのリンクを強調する例です。

<a href="page2.html" rel="next prefetch">Next</a>

[rel~=next] {
  color: red;
}

rel属性についてはこちら。

• 4.2.4 The link element — HTML5
  • rel attribute
  • 4.12.4 Link types

属性値が指定のものか、その後ろにハイフンが付いているもの [att|=val]

値がvalか、あるいはval-…であるものが対象です。グローバル属性のlangとか。

日本語ページへのリンクの背景に日本の国旗を表示する例です。

<a href="ja.html" hreflang="ja-JP">Japanese Edition</a>

[hreflang|=ja] {
  background-image: url("flag-jp.png");
}

（あんまり便利そうな使い方が思いつかなかった……。）

属性値が指定のもので始まるもの [att^=val]

外部サイトへのリンクに枠線を表示させます。

[href^=http://],
[href^=https://] {
  border: solid 1px;
}

ちなみに正規表現の^も先頭を表してますね。

属性値が指定のもので終わるもの [att$=val]

PDFへのリンクを強調表示します。

[href$=.pdf] {
  font-style: oblique;
}

属性値が指定のものを含むもの [att*=val]

先頭でも末尾でも、あるいは前後が空白でもハイフンでもその他普通の文字でも、選択します。

[href*=hello] {
}

（もう例が思いつかない……。）

属性値が指定のものを含まないもの……？ [att!=val]

これはありません。

jQueryだと使えるんですが、それはjQuery/Sizzleが独自に拡張したセレクターですので。

• Attribute Not Equal Selector [name!=”value”] – jQuery API

まとめ

属性セレクターの例

対応

IE 7以上, その他一般的なブラウザーで利用可能です。

IE 6はだめ。

参考

• Selectors Level 3
  • 6.3. Attribute selectors … 仕様
• 属性セレクタ – CSS | MDN … Mozillaの。日本語