CSS3の擬似クラスでよく使うもの&子供セレクター

CSS3の擬似クラスでよく使うもの&子供セレクター

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」のほう)だけに適用されます。