CSS3で使える、めちゃくちゃ便利なセレクタたち。
全ての要素を指定
| * |
すべての要素 |
|---|
状態系
| E:empty | テキストノードを含め、子を持たない E 要素 |
|---|---|
| E:not(s) | 単体セレクタ s にマッチしない E 要素 |
| E:active |
ユーザー操作でアクティブになったE要素 |
| E:hover | カーソルなどが乗ったE要素 |
| E:focus |
フォーカス中のE要素 |
| E:target | URL のフラグメントに一致する id を持つE要素 |
| E:lang(fr) | 言語情報 "fr" を持つ E 要素 (言語情報の決定方法は文書言語が規定する) |
| E:enabled E:disabled |
UI 要素である E のうち、有効 (:enabled) であるもの、無効 (:disabled) であるもの |
| E:checked | UI 要素である E のうち、チェックされた (:checked) もの 例：チェックボックスやラジオボタンなど |
属性セレクタ系
| E[foo] | "foo" 属性を持つ E 要素 |
|---|---|
| E[foo="bar"] | "foo" 属性の値が "bar" である E 要素 |
| E[foo~="bar"] | "foo" 属性が空白区切りの値をとり、その値の1つが "bar" である E 要素 |
| E[foo^="bar"] | "foo" 属性の値が "bar" から始まる E 要素 |
| E[foo$="bar"] | "foo" 属性の値が "bar" で終わる E 要素 |
| E[foo*="bar"] | "foo" 属性の値に "bar" という文字列を含む E 要素 |
順番系
| E > F | E 要素の子である F 要素 |
|---|---|
| E + F | E 要素の直後に現れる F 要素 |
| E ~ F | E 要素のあとに現れる F 要素 |
| E:nth-child(n) | n 番目の子である E 要素 |
| E:nth-last-child(n) | 後ろから数えて n 番目の子である E 要素 |
| E:nth-of-type(n) | 同じ型をもつ要素のうち n 番目にある E 要素 |
| E:nth-last-of-type(n) | 同じ型をもつ要素のうち後ろから数えて n 番目にある E 要素 |
| E:first-child | 最初の子である E 要素 |
| E:last-child | 最後の子である E 要素 |
| E:first-of-type | 同じ型をもつ要素のうち最初の E 要素 |
| E:last-of-type | 同じ型をもつ要素のうち最後の E 要素 |
擬似要素
| E::before | E 要素の内容の前にある generated content |
|---|---|
| E::after | E 要素の内容の後にある generated content |
コメント