今日はCSSの疑似クラスについての備忘録。
疑似クラスとは、要素が特定の状態にある場合にスタイルを指定するもの。
具体的にはリンク文字にマウスカーソルがオーバーした時など。
セレクタとなる要素名のあとに：（コロン）を付けて記述する。
a:hover{color:red}
アンカータグ（リンク）でhover（マウスカーソルがオーバー）したときに、color（文字）をred（赤）にする。
まあここまではよく利用するので特に備忘録は必要としないけれど、CSS3からは疑似クラスが大量に増えた。
これは、すぐに覚えれそうにないので備忘録。
:last-child 親要素の最後の子要素
:target フラグメント識別子を持ってるurlリンクでターゲット対象にされた要素
:enabled ある要素が有効な時（フォーム等）
:disabled ある要素が無効な時（フォーム等）
:checked ラジオボタン、チェックボックスがチェックされた状態
:indeterminate ラジオボタン、チェックボックスがチェックされてるかどうか不確定の状態
:root ドキュメントルートの要素
:nth-child(n) 親要素のn番目の子要素
:nth-last-child(n) 親要素の最後から数えてn番目の子要素
:nth-of-type(n) 親要素の中で兄弟関係にある同じ種類の要素の中のn番目の要素
:nth-last-of-type(n) 親要素の中で兄弟関係にある同じ種類の要素の中最後から数えてn番目の要素
:first-of-type 親要素の中で兄弟関係にある同じ種類の要素の中の最初の要素
:last-of-type 親要素の中で兄弟関係にある同じ種類の要素の中の最後の要素
:only-child 兄弟を一つも持たない、その親の唯一の子である要素
:only-of-type 同じ要素の兄弟が一つもない要素
:empty 子要素を一つも持たない要素
:contains() テキストの内容が与えられた部分文字列を含む要素
:not() 否定時の要素
にほんブログ村
