セレクタ [CSS]

セレクタ

参考：

CSS セレクタ | MDN

セレクタの種類

単純セレクタ

• 要素型セレクタ
• クラスセレクタ
• ID セレクタ
• 全称セレクタ
• 属性セレクタ

結合子

• 隣接兄弟結合子
• 一般兄弟結合子
• 子結合子
• 子孫結合子
• 列結合子

擬似クラス

• :hover
• :focus
• :visited
• :active
• :enabled
• :disabled
• :checked
• :required
• :valid
• :invalid

など

擬似要素

HTML に含まれていないエンティティ

• ::before
• ::after
• ::placeholder
• ::first-letter
• ::first-line

など

参考：

セレクタの種類 | HTML クイックリファレンス

CSS セレクタ | MDN

Complex Selectors | Shay Howe

:first-child

兄弟要素の中で、最初の要素を表す擬似クラス。

参考：

:first-child | MDN

:last-child

兄弟要素の中で、最後の要素を表す擬似クラス。

参考：

:last-child | MDN

:only-child

唯一の子要素を表す擬似クラス。

参考：

:only-child | MDN

:nth-child()

兄弟要素の中で、要素を位置に基づいて選択する。

参考：

:nth-child() | MDN

:nth-last-child()

兄弟要素の中で、要素を最後から数えた位置に基づいて選択する。

参考：

:nth-last-child() | MDN

:first-of-type

兄弟要素の中で、その種類の最初の要素を表す擬似クラス。

参考：

:first-of-type | MDN

:last-of-type

兄弟要素の中で、その種類の最後の要素を表す擬似クラス。

参考：

:last-of-type | MDN

:nth-of-type()

兄弟要素の中で、指定された型の要素を位置に基づいて選択する。

参考：

:nth-of-type() | MDN

:nth-last-of-type()

兄弟要素の中で、指定された型の要素を最後から数えた位置に基づいて選択する。

参考：

:nth-last-of-type() | MDN

:root

文書を表すツリーのルート要素を選択する。

参考：

:root | MDN

:not

参考：

:not() | MDN

クラス名における大文字・小文字の取り扱い

参考：

Class 名に、大文字小文字の扱い | CSS note

id 名/class 名に使用できる文字の種類 – GitHub Gist

属性セレクタ

• [attr]：指定された名前の属性を持つ要素を選択する。
• [attr=value]：指定された属性が指定された値を持つ要素を選択する。
• [attr^=value]：指定された属性の値が指定された値で始まる要素を選択する。
• [attr$=value]：指定された属性の値が指定された値で終わる要素を選択する。

参考：

属性セレクタ | MDN

複数の属性セレクタを同時に使う

div[data-size="large"][data-color="red"]

参考：

CSS で複数の属性セレクタを指定する – Qiita

複数の属性 | jQuery リファレンス

Specify multiple attribute selectors in CSS – Stack Overflow

互換性／テスト

参考：

Can I use… Support tables for HTML5, CSS3, etc

CSS4-Selectors | Browser CSS Selector Test

Selectors Level 4 (CSS4)

Selectors Level 4 (CSS4 セレクタ) | innov-staff-blog

Selectors Level 4 | W3C Editor’s Draft

Selectors Level 4 日本語訳

属性セレクタでインラインスタイルを扱う方法

参考：

CSS selector by inline style attribute – Stack Overflow

括弧

参考：

Are parentheses allowed in CSS selectors? – Stack Overflow