セレクタ

参考:

セレクタ (索引)  | MDN

Selectors | MDN

Complex Selectors | Shay Howe

セレクタの種類

単純セレクタ

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

結合子

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

擬似クラス

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

など

擬似要素

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

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

など

参考:

CSS セレクタ | MDN

:nth-of-type

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

参考:

:nth-of-type() | MDN

:last-of-type

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

参考:

: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

タグ:

コメントを残す

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