普段何気なく使ってるCSSのセレクタですが、実は結構たくさんの種類があります。

いちいち全て覚えておく必要はないですが、どういったものがあるのかを知っているのとそうでないのとでは作業効率に大きな差が...。

CSS3からはさらに種類が増え便利になってますので、一度確認してみましょう!

目次

CSS3時点で使用できるセレクタ表

引用元 - 原文(selectors-3)

引用元 - 日本語訳(セレクタ3)

パターン 説明 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のコロンの数はなぜ違う?擬似要素と擬似クラスの違いとは? :before,:afterと::before,::afterのコロンの数はなぜ違う?

CSS3から、擬似要素は::のようにコロンを2つ、擬似クラスは:とコロンを1つにするという新たなルールが決められていますので、できるだけそのルールに従っておくといいと思います。

おまけ:CSSの歴史

これまでのCSSの歴史について、以前気なったのでメモにまとめてみました。

CSS3・CSS4とは?CSSの歴史と現状、Level(レベル)の遷移について調べてみた。CSS3・CSS4とは?CSSの歴史と現状、Level(レベル)の遷移について調べてみた。

CSS3から「モジュール」という概念によって管理・開発されるようになっており、これらのことを知っていると各セレクタのブラウザ対応の違いなどに関しても混乱しにくくなるかと思います。

ご興味ございましたら、是非ご一読ください。

- Thank you for reading. -

コメント

コメントする