CSSを利用していて、特定状態の要素にだけスタイルを適用したいといったケースがでてきます。疑似クラスを利用すれば、思い通りにスタイルを適用することができます。ここでは、利用頻度の高い疑似クラスの使い方について紹介します。
目次
構造擬似クラス
:nth-of-type系｜特定兄弟要素の位置
| クラス | 対象要素 |
|---|---|
| :nth-of-type() | 兄弟要素のグループの中で、最初から数えてn番目の要素 |
| :nth-last-of-type() | 兄弟要素のグループの中で、最後から数えてn番目の要素 |
| :first-of-type | 兄弟要素のグループの中で、最初の要素 |
| :last-of-type | 兄弟要素のグループの中で、最後の要素 |
See the Pen nth-of-type by waku-waku (@raku-raku) on CodePen.
上記例でいうと、兄弟要素は、 dl要素 内の dt要素のみ が対象になります。
:nth-child系｜全兄弟要素の位置
| クラス | 対象要素 |
|---|---|
| :nth-child() | 兄弟要素のグループの中で、最初から数えてn番目の要素 |
| :nth-last-child() | 兄弟要素のグループの中で、最後から数えてn番目の要素 |
| :first-child | 兄弟要素のグループの中で、最初の要素 |
| :last-child | 兄弟要素のグループの中で、最後の要素 |
See the Pen nth-child by waku-waku (@raku-raku) on CodePen.
上記例でいうと、兄弟要素は、 dl要素 内の dt要素とdd要素 が対象になります。last-child は dd になるので color: green; のスタイルは適用されません。
even(偶数) odd(奇数) で位置指定
偶数番目、奇数番目の要素にスタイルを適用したい場合、 even odd を利用すると簡潔に記述できます。
# 偶数番目の要素
div:nth-child(even) {
}
# 奇数番目の要素
div:nth-child(odd) {
}:empty｜中身が空
:empty は、中身が空の要素を対象にします。
例えば、 div:empty と指定した場合、 <div></div> のように中身が無い要素が対象になります。
ダイナミック擬似クラス
| クラス | 対象要素 |
|---|---|
| :visited | リンク先にアクセス済みの要素 |
| :link | リンク先に未訪問の要素 |
| :focus | フォーカス状態の要素 |
| :hover | カーソルを重ねた状態の要素 |
| :active | アクティブ状態(ボタンが押された状態)の要素 |
インプット擬似クラス
| クラス | 対象要素 |
|---|---|
| :checked | ラジオボタン、チェックボックス、オプションボタンで選択中の要素 |
| :enabled / :disabled | disabled属性がついてない / disabled属性がついている |
その他
:target｜URLフラグメントに一致
:target は、 URLフラグメントに一致するIDを持つ要素を対象にします。
例えば、URLが index.html#section4 であれば、 <div id="section4"></div> が対象になります。
:not()｜指定条件と不一致
:not() は、条件に一致しない要素を対象にします。
例えば、 :not(.item) と指定した場合、 itemクラス以外の要素 が対象になります。
