こんにちわ。WP-Eイクラこと@ampersand_xyzです。

CSS3のセレクタ、ちゃんと覚えてる？

普段使わなかったりするようなセレクタって、すっかり脳みそから抜け落ちてしまい、適用されているスタイルを確認したときに あれ？コレなんだったっけ？ というセリフを何度心のなかでつぶやいたか分かりません。

また、場面によって必要に応じたセレクタを使えてるかどうかというところも気になるところ。どんなセレクタがあるのかを覚えておけば、たとえばDOMの動的生成をするときに無駄な分岐処理をしてstyle適用とか、JSでゴリゴリスタイル付与とかしなくてよくなるはずです。

おさらい用チートシート作成を兼ねて、Selector Level3 のSelectorsについて、セレクタの記法と使い方のgistつけてまとめていきたいと思います。

なお、仕様書の日本語訳は以下のページをご参照ください
https://standards.mitsue.co.jp/resources/w3c/TR/css3-selectors/

あわせ、各セレクタのブラウザ対応状況は以下のページをご参照ください
CSS SELECTORS AND PSEUDO SELECTORS BROWSER COMPATIBILITY

セレクタ一覧

型セレクタ

E

選択範囲

E要素

使用例

全称セレクタ

*

選択範囲

すべての要素（範囲に名前空間の指定が可能）

使用例

属性セレクタ

属性セレクタはかなり便利に使えるものが多く、特定の条件を満たす要素という形で指定できるので、動的に吐き出される要素と相性が良いので重宝します。
案外見かける、処理側でHTML出力時に判定してスタイルを指定する実装・・・みたいな真似をしないように属性セレクタを活用したいところ。
なお、属性セレクタも名前空間指定が可能です。

E[foo]

選択範囲

“foo” 属性を持つ E 要素。
条件は「指定の属性を持っているかどうか」であり、値は何でもOK。

使用例

E[foo=”bar”]

選択範囲

“foo” 属性が”bar”の値である E 要素。

使用例

E[foo~=”bar”]

選択範囲

“foo” 属性が空白区切りの値であり、その中の値の1つが”bar”であるE要素。

使用例

E[foo^=”bar”]

選択範囲

“foo” 属性の値が”bar”から始まるE要素。

使用例

E[foo$=”bar”]

選択範囲

“foo” 属性の値が”bar”で終了するE要素。

使用例

E[foo*=”bar”]

選択範囲

“foo” 属性の値に”bar”を含むE要素。

使用例

E[foo|=”bar”]

選択範囲

“foo” 属性の値がハイフン区切りの値をとり、その値が “bar” から始まる E 要素。

使用例

構造擬似クラス

カユイところに手が届くのが擬似構造クラス。
CSSレベル3以上のものが多いため、レガシーブラウザにも対応しなくてはいけない案件に使用する場合については気をつけるべきところ。
うまく使って保守性の高いマークアップとスタイル定義を心がけたい。

:root

選択範囲

文書のルート要素
:root セレクタのほうが優先度は高いけれども、選択範囲は　html と等価。
参考:https://developer.mozilla.org/ja/docs/Web/CSS/:root

使用例

E:nth-child(an+b)

選択範囲

n 番目の子であるE要素
最初の子要素のインデックスは1。
n はその要素が何番目であるかであり、正の整数もしくは0の値を取る。
a と b の値は整数 (正、負、もしくは0) でなければならない。

an+bではなく、‘odd’ や ‘even’ という引数を取ることもできる。‘odd’ は 2n+1（奇数を現す） と同じ意味を持ち、また ‘even’ は 2n（偶数を現す） と同じ意味を持つ。

その他nth-childの記述に関しての詳しい仕様は仕様書を参照してください。

使用例

E:nth-last-child(an+b)

選択範囲

後ろから数えて n 番目の子である E 要素

カッコ内に取る引数の仕様はnth-childと同じ。

使用例

E:nth-of-type(an+b)

選択範囲

同じ型をもつ要素のうち n 番目にある E 要素

カッコ内に取る引数の仕様はnth-childと同じ。

使用例

E:first-child

選択範囲

最初の子である E 要素
:nth-child(1) と等価

使用例

E:last-child

選択範囲

最後の子である E 要素
:nth-last-child(1) と等価

使用例

E:first-of-type

選択範囲

同じ型をもつ要素のうち最初の E 要素
:nth-of-type(1) と等価

使用例

E:last-of-type

選択範囲

同じ型をもつ要素のうち最後の E 要素
:nth-last-of-type(1) と等価

使用例

E:only-child

選択範囲

唯一の子（兄弟になる要素が存在しない）である E 要素
:first-child:last-child および :nth-child(1):nth-last-child(1)　と等価

使用例

E:only-of-type

選択範囲

同じ型をもつ要素が他にない、兄弟になる要素が存在しない E 要素
:first-of-type:last-of-type および :nth-of-type(1):nth-last-of-type(1)　と等価

使用例

E:empty

選択範囲

テキストノードを含め子を持たない E 要素

使用例

リンク擬似クラス

CSSLevel1の時から存在している割と馴染みの深いセレクタ。visitedが色しか指定出来ないのは注意点。

E:link　／　E:visited

選択範囲

ハイパーリンクのアンカーである E 要素のうち、未訪問 (:link) であるもの、訪問済 (:visited) であるもの
:visitedはGoogle Chrome 6, Safari 5, Firefox 4, Internet Explorer 9 以降では色関連のプロパティ以外のプロパティは適用されない

使用例

ユーザーアクション擬似クラス

動作に対してのセレクトを行うことの出来るクラス。
スマホ対応を行う際等について、どの動作がクラスに該当するのかおさえておきたい。
また、排他的なクラスではないという点にも注意。

E:hover

選択範囲

ユーザーがポインティングデバイスで示したE要素

使用例

E:active

選択範囲

ユーザーによって実行されたE要素

使用例

E:focus

選択範囲

ユーザーによって実行されたE要素
focusはほかのユーザーアクション擬似クラスと相互排他的ではないという点に注意

使用例

ターゲット擬似クラス

ハッシュで指定されている要素に対してスタイルを指定できるクラス。
pjaxのような画面遷移が主流になっている昨今、出番が増えることが予想されるセレクタ。

E:target

選択範囲

URI が参照した(ハッシュ指定されている)ターゲットになる E 要素

使用例

言語情報擬似クラス

E:lang(C)

選択範囲

言語情報 C を持つ E 要素 (言語情報の決定方法は文書言語が規定する)
言語情報 C は必ずしも有効な言語名である必要はないが、有効なCSS識別子でなくてはならない

使用例

UI 要素状態擬似クラス

状態に対してスタイルを指定出来るクラス。
使い勝手がよいけれどもCSSLevel 3以上であり、レガシー環境では使えない点を忘れないように注意。

E:enabled ／ E:disabled

選択範囲

UI 要素である E のうち、有効 (:enabled) であるもの、無効 (:disabled) であるもの
なお、表示非表示（display、visibility）は有効無効に影響を及ぼさない。

使用例

E:checked

選択範囲

UI 要素である E のうち、チェックされた (:checked) もの (チェックボックスやラジオボタンなど)

使用例

備考

不確定状態を選択する:indeterminate 擬似クラスについては記載を省略します。

擬似要素

擬似要素は文書ツリー上に、文書言語によって記された以上の抽象概念を生成し、具体的には、要素内容の最初の行・最初の文字という本来はアクセスできない要素の情報の取扱や、擬似要素は元文書に存在しない内容を参照することを可能にします。
言葉にすると分かりづらいけどめっちゃ活躍してるセレクタ群。

E::first-line

選択範囲

E 要素の最初の整形済行
整形済み行の定義は https://standards.mitsue.co.jp/resources/w3c/TR/css3-selectors/#first-line を参照

使用例

E::first-letter

選択範囲

E 要素の先頭文字

使用例

E::before

選択範囲

E 要素の内容の前にある生成コンテンツ
なお、生成コンテンツはインライン要素になる。
また、::first-letter と ::first-lineを同時に適用する場合は、::beforeによって生成される要素に適用される

使用例

E::after

選択範囲

E 要素の内容の後にある生成コンテンツ
なお、生成コンテンツはインライン要素になる。

使用例

クラスセレクタ

要素指定を付けないでクラスセレクタを使用する場合、暗黙的に全称セレクタがついて指定されているのと一緒。

E.boo

選択範囲

“boo”のclassをもつE要素

使用例

IDセレクタ

要素指定を付けないでIDセレクタを使用する場合、暗黙的に全称セレクタがついて指定されているのと一緒。

E#boo

選択範囲

“boo”というidをもつE要素

使用例

否定擬似クラス

便利だとは思うけど保守性を考えると使いどころが難しい気がする。

こちらのページにnotセレクタについて深い考察があるので是非

CSS3で追加されたセレクタ「:not()」について考えてみました　- Webpark

E:not(s)

選択範囲

単体セレクタ s にマッチしない E 要素
擬似クラスの詳細度はsと等値

使用例

バグ？

s に要素セレクタを入れた場合に意図した範囲がセレクトされない模様。
Gistの「ほげほげ」は本来どのセレクタからも選択されない要素のはずが、青色になる。

MDNの適用例に倣っても、同じ結果にならない。
というか「このようになります」って書いてある部分がDOMstyleを直指定しているので判断がつかない。
https://developer.mozilla.org/ja/docs/Web/CSS/:not

結合子

ある要素の子孫要素を表すセレクタ。使用される頻度はかなり高いと思われる。
セレクタの適用範囲を広くし過ぎると後々の保守で泣きを見る。使うときはちゃんと先々のことを見越した設計した上で使うように注意。

E F

選択範囲

子孫結合子。E 要素の子孫であるすべての F 要素。

使用例

E > F

選択範囲

子結合子。E 要素の子であるすべての F 要素。

使用例

E + F

選択範囲

隣接兄弟結合子。E 要素の直後に現れる F 要素

使用例

E ~ F

選択範囲

一般兄弟結合子。E 要素のあとに現れる F 要素

使用例

セレクタを使う上で大事だと思っていること

セレクタの適用範囲・粒度は、必要とする範囲だけにするようにしましょう ということを主張したいです。
div > p とか無闇にでかい範囲の結合子とかを指定したとき、どんなことになるのかをきちんと想像してセレクタの粒度を決めてください。
divの中のpは、いま あなたが使いたい部分にしか出てこないのですか？ほんとに？

ここを油断してると、後からimportantをいっぱい書く羽目になりますよ。

もちろん、resetとかnormalizeはこの限りではありません。

まとめ

こんなに縦に長い記事を読んでくださってありがとうございます。
まとめておいて恥ずかしいのですが、実はこれを書くまで知らなかったセレクタとかが存在してました。

IE9以上であればほとんどのセレクタが問題なく利用が可能なので積極的に利用していきたいですね。IE8？知らんなぁ！

セレクタのうまい組み合わせ方とか、みなさんの秘蔵TIPSがあったらご教示いただければ嬉しいです。