CSSの擬似要素と擬似クラス

※過去ブログの転記

 

いつもどっちがどっちかわからなくなるし、いまいち把握できていないのでmemo
擬似要素と擬似クラスの違いをまとめてみました

擬似要素

指定したセレクタ一部に対して適用

セレクタ 対象
::before 要素の前
::after 要素の後
::first-line 要素の最初の1行
::first-letter 要素の最初の1文字
::selection 選択した要素*1
  • CSS3から擬似クラスとの判別がしやすいように セレクタ: ではなく セレクタ:: をつける
  • セレクタ: でも動くし、IE8以下は セレクタ:: を解釈しないらしい
  • inputimgのような部品には使用できない
  • ::selectionfirefox用に::-moz-selectionのようにベンダープレフィックスが必要

擬似クラス

指定したセレクタ全体に対して適用される

セレクタ 対象
:link 未訪問リンク
:visited 訪問済みリンク
:hover マウスホバーしたとき
:active リンクを押してから離すまでの間の状態
:focus 対象にフォーカスしたとき
:first(last)-child 最初(最後)
:nth-(last-)child(X) 最初(最後)からX番目
:nth-(last-)child(n+X) 最初(最後)から数えてX番目から最後(最初)まで
:nth-(last-)child(-n+X) 最初(最後)からX番目まで
:nth-(last-)child(Xn) 最初(最後)からXの倍数
:nth-child(odd) 奇数
:nth-child(even) 偶数
:only-child 子要素が1つだけのセレクタに対して
:lang(lang-code) lang属性で指定されたテキストに対して適用
:target アンカーリンク先に対して有効
:root 最上位の親要素(html)に対して
:not() 否定
:empty 子要素が空のもの
:enabled 有効なinputに適用
:disabled 無効なinputに適用
:checked checkedがついているinputに対して
  • aリンクに関する擬似クラスは順番通りに指定しないと機能しない
    英語圏では LOVE and HATE で LVHA で覚えるらしい(強引すぎて普通に覚え辛い)
  • nthはn番目の意味(first, fourth, fifth, sixth...みたいな)
  • XXX-child は親要素から兄弟要素を含み子要素全てをカウントする
  • XXX-of-type は親要素内のセレクタの型(type)を見て子要素をカウントする
  • :emptyはテキストや改行、半角スペースがあると適用されない(コメントアウトは可)

:targetは初めて聞いた。すごい。使えそう
多分知らなければjQueryでやってたな...

:rootはどこで使用するんだろう
CSS変数の宣言をするためのセレクタなのかな
htmlでよくないか?

擬似クラスはphpとかのif文に近い気がする

補足

擬似要素と擬似クラスを同時に使いたいときは擬似クラスが先に来るように記述する

セレクタ:擬似クラス::擬似要素

 

 

*1:CSS3の仕様からは外れているらしい