セレクタ

ドキュメント:

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

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Protected by reCAPTCHA