ここでは、さらに応用的に使用されるセレクタについて紹介します。
| セレクタ | 名称 | 意味 |
|---|---|---|
| E > F | 子セレクタ | セレクタE直下のセレクタF |
| E + F | 隣接セレクタ | セレクタE直後のセレクタF |
| E ~ F | 間接セレクタ | セレクタEの後に出てくるセレクタF |
| E[attr] E[attr=”value”] E[attr^=”value”] E[attr$=”value”] E[attr*=”value”] | 属性セレクタ | attr属性を持つE attr属性の値がvalueのE attr属性の値がvalueで始まるE attr属性の値がvalueで終わるE attr属性の値にvalueを含むE |
| E:first-child E:last-child E:nth-child(n) E:nth-last-child(n) E:only-child E:first-of-type E:last-of-type E:nth-of-type(n) E:nth-last-of-type(n) E:only-of-type | 構造擬似クラス | 最初の子であるE要素 最後の子であるE要素 n番目の子であるE要素 後ろからn番目の子であるE要素 唯一の子であるE要素 最初のE要素 最後のE要素 n番目のE要素 後ろからn番目のE要素 唯一のE要素 |
| E:not(s) | 否定擬似クラス | セレクタsではないE要素 |
| E:enabled E:disabled E:checked | UI擬似クラス | 入力可能なE要素 入力不可能なE要素 チェックされたE要素 |
| E::first-letter E::first-line E::before E::after E::selection | 擬似要素 | E要素の最初の１文字 E要素の最初の１行 E要素内の先頭にコンテンツを生成 E要素内の末尾にコンテンツを生成 E要素のうち、ユーザが選択した範囲 |