セレクタ [CSS]

セレクタ

ドキュメント：

CSS セレクタ | MDN

使い方

参考：

複数のセレクタを指定する／絞り込むサンプル |ITSakura

セレクタの種類

単純セレクタ

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

結合子

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

擬似クラス

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

など

擬似要素

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

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

など

ドキュメント：

CSS セレクタ | MDN

参考：

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

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-child() の of フィルターを使ったラクラク要素指定法 | ミツエーリンクス

selector list argument of :nth-child and :nth-last-child CSS pseudo-classes | Can I Use Support Tables

: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

:empty

内容が空の要素を選択する。

ドキュメント：

:empty | MDN

参考：

子要素がないタグのスタイリングは :empty セレクタを使うと便利 – Qiita

要素が空の時のセレクタ :empty の使い方 | ハックノート

CSS 疑似要素の :empty でタグの中身が空のときのスタイルを設定する | Webrandum

CSS の便利な疑似セレクタ :empty と :blank、その違いと賢い使い方 | コリス

CSS3 疑似要素 :blank と :empty 試してみた | かもメモ

E:empty | HTML クイックリファレンス

:empty Selector | W3Schools

Is there a CSS selector for elements containing certain text? – Stack Overflow

:has

ドキュメント：

:has() | MDN

参考：

:has() 疑似クラスの便利な使い方を徹底解説 | コリス

CSS で inner-text を条件にしたセレクタを書いてみたいなぁ | Neo’s World

:has() | Can I Use Support Tables

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

参考：

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

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

属性セレクタ

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

ドキュメント：

属性セレクタ | MDN

カスタムデータ属性をセレクタに使う

参考：

HTML タグの中の data とは何か？カスタムデータ属性 (data 属性と dataset) の使い方やメリットを実例で解説／data 属性と値を指定してスタイルを変える方法 | Proぐらし

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

div[data-size="large"][data-color="red"] { /* ... */ }Code language: CSS (css)

参考：

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