カテゴリー:
CSS
閲覧数:950 配信日:2016-04-11 20:12
擬似クラス
pseudo-classes
・要素や属性などの文書構造だけでは特定できない “ある状況にある要素”を対象としてスタイルを適用するセレクタ
CSS3もCSS2も同じ記述方式
・何れも「：シングルコロン」使用
一覧表
| セレクタの書式 | スタイルを適用する対象 | 使用例 |
|---|---|---|
| 要素名:link | 未訪問のリンク | a:link {color:blue;} |
| 要素名:visited | 訪問済のリンク | a:visited {color:blue;} |
| 要素名:hover | カーソルが乗っている要素 | a:hover {color:blue;} |
| 要素名:active | クリック中の要素 | a:active {color:blue;} |
| 要素名:focus | フォーカスされている要素 | input:focus {background:blue;} |
| 要素名:lang | 特定の言語を指定した要素 | p:lang(en) {color:blue;} |
| 要素名:first-child | 要素内の最初の子要素 | p:first-child {color:blue;} |
| 要素名:nth-of-type(n) | その種類のn番目要素。途中で別の種類の要素が入る場合にはそれを数えず、 指定した種類の要素のみを数え、スタイル適用の対象を決定する | p:nth-of-type(1) |
| 要素名:nth-child(n) | 種類に関係なく要素を数えて、n番目 | p:nth-child(1) |