いい加減ググッてばかりいないでまとめます擬似クラスと擬似要素。
擬似クラス・擬似要素って？
マークアップすることができなかったり(このケースは少ない)、好ましくない特定の状況のときに使用するセレクタです。
要するに「んークラス付けるとめんどくなるな～」とか、なった場合にもってこいのものです。
現在定義されてる擬似クラス
- :link
- :visited
- :active
- :hover
- :focus
- :lang
- :first-child ・・・ある要素内で最初に現れる子要素を対象とする擬似クラス
ここまでがCSS2で定義された擬似クラスです。
意外と知られていないのが:first-childがCSS2だってこと。
要するにIE7でも大丈夫よってことです。
余談ですが、:last-childを使うよりも:first-childを使った方がIEには優しいんです。
続きましてCSS3で新たに定義された擬似クラスは以下のとおりです。
- :last-child ・・・ある要素内で最後の子要素を対象とする擬似クラス
- :first-of-type ・・・ある種類の要素で最初に現れる要素を対象とする擬似クラス
- :last-of-type ・・・ある種類の要素で最後に現れる要素を対象とする擬似クラス
- :only-child ・・・唯一のなる要素を対象とする擬似クラス
- :only-of-type ・・・唯一となるその種類の要素を対象とする擬似クラス
- :nth-child(n) ・・・n番目の子となる要素を対象とする擬似クラス
- :nth-last-child(n) ・・・後から数えてn番目の子となる要素を対象とする擬似クラス
- :nth-of-type(n) ・・・n番目のその種類の要素を対象とする擬似クラス
- :nth-last-of-type(n) ・・・後から数えてn番目のその種類の要素を対象とする擬似クラス
- :empty ・・・要素ないが空白を含め空の要素を対象とする擬似クラス
- :target ・・・アンカーでジャンプ先の要素を対象とする擬似クラス
- :enabled ・・・UI要素の状態擬似クラスで有効のときを対象とする擬似クラス
- :disabled・・・UI要素の状態擬似クラスで無効のときを対象とする擬似クラス
- :checked ・・・UI要素の状態擬似クラスでラジオボタンやチェックボックスがチェックされたときを対象とする擬似クラス
- :not(s) ・・・特定のセレクタ以外のセレクタを対象とする擬似クラス
言葉で書くとちょっと意味が分からないですね。
それぞれの擬似クラスの使いドコロや使い方は改めるとして、以上がCSS3で定義された擬似クラスです。
次に擬似要素
擬似要素もCSS3で定義されたものです。
- ::before ・・・要素の前を対象とする擬似要素
- ::after ・・・要素の後ろを対象とする擬似要素
- ::first-line ・・・最初の行を対象とする擬似要素
- ::first-letter ・・・最初の文字を対象とする擬似要素
何かと使用頻度の高いbefore、afterも擬似要素です。
擬似クラスと擬似要素の違い
そもそも使い方が違うんですが、もっと分かりやすく説明すると、
擬似クラスはマウスオーバーしたときや、ラジオボタンがチェックされたときなど要素の状態を条件にしているのに対し、擬似要素は最初の一行や最初の文字など要素内の一部分を対象にしているのが大きな違いでしょう。
もう一つの違いはシングルコロンとダブルコロン
ですがこのダブルコロンが曲者でIE8以下だとそれぞれ違う解釈をされてしまいます。
というかIE7とIE8に関しては無視されてしまいます。
IE7はいいとしてもIE8はまだ切り捨てられない案件もありますので結局のところ記述はシングルコロンに落ち着くかと・・・。
まとめ
擬似クラスも増え便利になりました。←今!?
しかし使いドコロを見極めないとIEでコケてしましますよ！←結局IE依存w
