※この記事は最終更新日から9年以上経過しています。内容が古い可能性があります。

Pseudo-class

CSS3の擬似クラスについて

CSS3でデザインするときに
「あれ？なんだっけ？？」って思う時があるので、覚書。

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() 「なになにではない（否定）場合」の要素

あとは、子供セレクター

対象となる要素が特定の親要素の子要素の場合だけ対象となるセレクタ。子供セレクタ。

親要素 > 子要素 {
プロパティ: 値;
}

親要素と子要素を「>」で区切って記述します。この場合、子要素が指定した親要素の子要素だった場合だけが対象となります。子孫セレクタと違い子要素の場合だけが対象となりますので注意。
For example…

<body>
<div>
<p>HOGE-HOGE<p>
</div>
<p>FUGA-FUGA</p>
</body>

こんなHTMLがあったとすると、

body p {
color: #f00;
}

これだと、body要素の子孫であるp要素すべてが対象になりますので2つのp要素はいずれも色が変わります。

body>p {
color: #f00;
}

こうすると、直接の子要素しか対象になりませんので、2つ目のp要素（「FUGA-FUGA」のほう）だけに適用されます。

More from my site