普段何気なく使ってるCSSのセレクタですが、実は結構たくさんの種類があります。
いちいち全て覚えておく必要はないですが、どういったものがあるのかを知っているのとそうでないのとでは作業効率に大きな差が...。
CSS3からはさらに種類が増え便利になってますので、一度確認してみましょう！
目次
CSS3時点で使用できるセレクタ表
| パターン | 説明 | CSS3から |
|---|---|---|
| * | すべての要素 | |
| E | E 要素型 | |
| E[foo] | "foo" 属性を持つ E 要素 | |
| 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|="en"] | "foo" 属性の値がハイフン区切りの値をとり、その値が "en" から始まる E 要素 | |
| E:root | 文書のルート要素である E 要素 | ◯ |
| E:nth-child(n) | n 番目の子である E 要素 | ◯ |
| E:nth-last-child(n) | 後ろから数えて n 番目の子である E 要素 | ◯ |
| E:nth-of-type(n) | 同じ型をもつ要素のうち n 番目にある E 要素 | ◯ |
| E:nth-last-of-type(n) | 同じ型をもつ要素のうち後ろから数えて n 番目にある E 要素 | ◯ |
| E:first-child | 最初の子である E 要素 | |
| E:last-child | 最後の子である E 要素 | ◯ |
| E:first-of-type | 同じ型をもつ要素のうち最初の E 要素 | ◯ |
| E:last-of-type | 同じ型をもつ要素のうち最後の E 要素 | ◯ |
| E:only-child | 唯一の子である E 要素 | ◯ |
| E:only-of-type | 同じ型をもつ要素が他にない唯一の E 要素 | ◯ |
| E:empty | テキストノードを含め子を持たない E 要素 | ◯ |
| E:link E:visited |
ハイパーリンクのアンカーである E 要素のうち、未訪問 (:link) であるもの、訪問済 (:visited) であるもの | |
| E:active E:hover E:focus |
特定のユーザーアクション状態にある E 要素 | |
| E:target | URI が参照したターゲットになる E 要素 | ◯ |
| E:lang(fr) | 言語情報 "fr" を持つ E 要素 (言語情報の決定方法は文書言語が規定する) | |
| E:enabled E:disabled |
UI 要素である E のうち、有効 (:enabled) であるもの、無効 (:disabled) であるもの | ◯ |
| E:checked | UI 要素である E のうち、チェックされた (:checked) もの(チェックボックスやラジオボタンなど) | ◯ |
| E::first-line | E 要素の最初の整形済行 | |
| E::first-letter | E 要素の先頭文字 | |
| E::before | E 要素の内容の前にある generated content | |
| E::after | E 要素の内容の後にある generated content | |
| E.class | "class" クラスを持つ E 要素 (クラスの決定方法は文書言語が規定する) | |
| E#id | "id" という ID を持つ E 要素 | |
| E:not(s) | 単体セレクタ s にマッチしない E 要素 | ◯ |
| E F | E 要素の子孫である F 要素 | |
| E > F | E 要素の子である F 要素 | |
| E + F | E 要素の直後に現れる F 要素 | |
| E ~ F | E 要素のあとに現れる F 要素 | ◯ |
これを見ると、CSS3から一気にセレクタが増えています。
E ~ Fとかは私も今知りました。笑
個人的に覚えておきたい便利なセレクタ
まだあまり知られていないけれどめちゃくちゃ便利だなと思ったセレクタをピックアップしてみました。
- E[foo~="bar"]
- E[foo^="bar"]
- E[foo$="bar"]
- E[foo*="bar"]
- E:empty
- E ~ F
以上の6つですね。
あまり使用する頻度は高くないかもしれませんが、いざという時にとても役に立ちそうなので是非覚えておきたいところです...。
擬似クラスと擬似要素の違いとは？
ちなみに、擬似クラスと擬似要素って似てるけどどう違うのだろうか？
...ということついては別のメモにてまとめておりますので、気になった方は是非チェックしてみて下さい。
あわせて読みたい
擬似要素と擬似クラスの違いとは？ :before,:afterと::before,::afterのコロンの数はなぜ違う？
CSSにおける:before, :afterとか:hoverのことを擬似要素とか擬似クラスと言いますが、両者の違いは何なのかを調べてみました。 同じ意味でただ別の呼び方をしてるだけと...
CSS3から、擬似要素は::のようにコロンを2つ、擬似クラスは:とコロンを1つにするという新たなルールが決められていますので、できるだけそのルールに従っておくといいと思います。
おまけ：CSSの歴史
これまでのCSSの歴史について、以前気なったのでメモにまとめてみました。
あわせて読みたい
CSS3・CSS4とは？CSSの歴史と現状、Level(レベル)の遷移について調べてみた。
CSS3だとかCSS4だとかって一体何？今自分が使ってるCSSはどれ？というのが気になって、CSS (Cascading Style Sheets) の歴史を色々調べてみました。 CSS1の登場から現在...
CSS3から「モジュール」という概念によって管理・開発されるようになっており、これらのことを知っていると各セレクタのブラウザ対応の違いなどに関しても混乱しにくくなるかと思います。
ご興味ございましたら、是非ご一読ください。
