要素や属性そのものではなく,それらの状態や特徴を表す「擬似クラス」に対してスタイルを設定できるセレクターがあります.
対象 | セレクター |
まだ見ていないページヘのリンクに設定 | 要素:link |
すでに見たページヘのリンクに設定 | 要素:visited |
要素にポインターが重なっている時に適用する設定 | 要素:hover |
要素が選択された時に適用する設定 | 要素:active |
要素にフォーカスが移った時に適用する設定 | 要素:focus |
「#id名」を使用したリンクをクリックした時,その移動先の要素に設定 | 要素:target |
「lang属性」が指定された要素に設定 | 要素:lang() |
有効な要素に設定 | 要素:enabled |
無効な要素に設定 | 要素:disabled |
ラジオボタンやチェックボックスが選択されたとき設定 | 要素:checked |
文書内のルート要素(html要素)に設定 | 要素:root |
親要素内のn番目の子要素毎に設定.(an+b,odd,evenといった指定が可能) | 要素:nth-child() |
親要素内の後ろからn番目の子要素毎に設定.(an+b,odd,evenといった指定が可能) | 要素:nth-last-child() |
親要素内のn番目の同じ子要素毎に設定.(an+b,odd,evenといった指定が可能) | 要素:nth-of-type() |
親要素内の後ろからn番目の同じ子要素毎に設定.(an+b,odd,evenといった指定が可能) | 要素:nth-last-of-type() |
指定要素が親要素の最初の子要素の時設定 | 要素:first-child |
指定要素が親要素の最後の子要素の時設定 | 要素:last-child |
親要素の中で最初に現れた指定要素に設定 | 要素:first-of-type |
親要素の中で最後に現れた指定要素に時設定 | 要素:last-of-type |
指定要素が親要素の中の唯一の子要素の時設定 | 要素:only-child |
子要素の中に指定要素が1つしかない時設定 | 要素:only-of-type |
子要素や内容が空の要素に設定 | 要素:empty |
()に指定したセレクターと一致しない要素に設定 | 要素:not() |
HTMLの要素で表せない性質を記述する「擬似要素」に対してスタイルを設定できます.
対象 | セレクター |
指定した要素の最初の一行に設定 | 要素::first-line |
指定した要素の最初の1文字に設定 | 要素::first-letter |
要素の直前に追加される部分に設定 | 要素::before |
要素の直後に追加される部分に設定 | 要素::after |