※過去ブログの転記
いつもどっちがどっちかわからなくなるし、いまいち把握できていないのでmemo
擬似要素と擬似クラスの違いをまとめてみました
擬似要素
指定したセレクタの一部に対して適用
| セレクタ | 対象 |
|---|---|
::before |
要素の前 |
::after |
要素の後 |
::first-line |
要素の最初の1行 |
::first-letter |
要素の最初の1文字 |
::selection |
選択した要素*1 |
- CSS3から擬似クラスとの判別がしやすいように
セレクタ:ではなくセレクタ::をつける セレクタ:でも動くし、IE8以下はセレクタ::を解釈しないらしいinputやimgのような部品には使用できない::selectionはfirefox用に::-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の仕様からは外れているらしい
