CSS入門 | CSSセレクター | 疑似クラス
疑似クラス
CSSで疑似クラスは、選択したいHTML要素の特別な状態を指定するときに使用する。
CSS疑似クラス
| 疑似クラス | 説明 |
|---|---|
:link |
ユーザーがまだ一度もそのリンク先ページを訪問していない状態をすべて選択する。既定状態である。 |
:visited |
ユーザーが一度でもそのリンク先ページを訪問した状態をすべて選択する。 |
:hover |
ユーザーのマウスカーソルがリンク上にある状態をすべて選択する。 |
:active |
ユーザーがマウスでリンクをクリックしている状態をすべて選択する。 |
:focus |
フォーカスされたinput要素をすべて選択する。 |
:checked |
checked状態のinput要素をすべて選択する。 |
:enabled |
使用できるinput要素をすべて選択する。 |
:disabled |
使用できないinput要素をすべて選択する。 |
:target |
現在アクティブなtarget要素をすべて選択する。 |
:in-range |
特定範囲内の値を持つinput要素をすべて選択する。 |
:out-of-range |
特定範囲を外れる値を持つinput要素をすべて選択する。 |
:read-only |
readonly属性を持つinput要素をすべて選択する。 |
:read-write |
readonly属性を持たないinput要素をすべて選択する。 |
:required |
required属性を持つinput要素をすべて選択する。 |
:optional |
required属性を持たないinput要素をすべて選択する。 |
:valid |
有効な値を持つinput要素をすべて選択する。 |
:invalid |
無効な値を持つinput要素をすべて選択する。 |
:first-child |
すべての子要素の中で最初に位置する子要素をすべて選択する。 |
:last-child |
すべての子要素の中で最後に位置する子要素をすべて選択する。 |
:nth-child |
すべての子要素の中で前からn番目に位置する子要素をすべて選択する。 |
:nth-last-child |
すべての子要素の中で後ろからn番目に位置する子要素をすべて選択する。 |
:first-of-type |
すべての子要素の中で最初に登場する特定要素をすべて選択する。 |
:last-of-type |
すべての子要素の中で最後に登場する特定要素をすべて選択する。 |
:nth-of-type |
すべての子要素の中でn番目に登場する特定要素をすべて選択する。 |
:nth-last-of-type |
すべての子要素の中で後ろからn番目に登場する特定要素をすべて選択する。 |
:only-child |
子要素を1つだけ持つすべての要素の子要素を選択する。 |
:only-of-type |
子要素として特定要素を1つだけ持つすべての要素の子要素を選択する。 |
:empty |
子要素をまったく持たない要素をすべて選択する。 |
:root |
文書のroot要素を選択する。 |
:not(セレクター) |
すべてのセレクターと一緒に使用でき、該当セレクターを逆に適用する。 |
:lang(言語) |
特定要素を言語設定に応じて異なるように表現するときに使用する。 |
疑似クラスの構文
疑似クラスを使用するための構文は次のとおりである。
構文
セレクター:疑似クラス名 {プロパティ: プロパティ値;}
classやIDにも疑似クラスを使用できる。
構文
セレクター.クラス名:疑似クラス名 {プロパティ: プロパティ値;}
セレクター#ID名:疑似クラス名 {プロパティ: プロパティ値;}
疑似クラス名は大文字と小文字を区別しない。
代表的なCSS疑似クラス
CSSでよく使用する代表的な疑似クラスは次のとおりである。
-
動的疑似クラス
:link:visited:hover:active:focus
-
状態疑似クラス
:checked:enabled:disabled
-
構造疑似クラス
:first-child:nth-child:first-of-type:nth-of-type
-
その他の疑似クラス
:not:lang