セレクタ

参考

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

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

コメントを残す

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