セレクタ
参考:
セレクタの種類
単純セレクタ
- 要素型セレクタ
- クラスセレクタ
- ID セレクタ
- 全称セレクタ
- 属性セレクタ
結合子
- 隣接兄弟結合子
- 一般兄弟結合子
- 子結合子
- 子孫結合子
- 列結合子
擬似クラス
:hover
:focus
:visited
:active
:enabled
:disabled
:checked
:required
:valid
:invalid
など
擬似要素
HTML に含まれていないエンティティ
::before
::after
::placeholder
::first-letter
::first-line
など
参考:
:nth-of-type
兄弟要素のグループの中で指定された型の要素を、位置に基づいて選択する。
参考:
:first-of-type
兄弟要素の中で、その種類の最初の要素を表す擬似クラス。
参考:
:last-of-type
兄弟要素の中で、その種類の最後の要素を表す擬似クラス。
参考:
:root
文書を表すツリーのルート要素を選択する。
参考:
:not
参考:
クラス名における大文字・小文字の取り扱い
参考:
id 名/class 名に使用できる文字の種類 – GitHub Gist
属性セレクタ
[attr]
:指定された名前の属性を持つ要素を選択する。[attr=value]
:指定された属性が指定された値を持つ要素を選択する。[attr^=value]
:指定された属性の値が指定された値で始まる要素を選択する。[attr$=value]
:指定された属性の値が指定された値で終わる要素を選択する。
参考:
複数の属性セレクタを同時に使う
div[data-size="large"][data-color="red"]
参考:
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
属性セレクタでインラインスタイルを扱う方法
参考:
CSS selector by inline style attribute – Stack Overflow
括弧
参考: