セレクタ
参考:
目次
- 1 使い方
- 2 セレクタの種類
- 3 :first-child
- 4 :last-child
- 5 :only-child
- 6 :nth-child()
- 7 :nth-last-child()
- 8 :first-of-type
- 9 :last-of-type
- 10 :nth-of-type()
- 11 :nth-last-of-type()
- 12 :root
- 13 :not
- 14 :empty
- 15 クラス名における大文字/小文字の取り扱い
- 16 属性セレクタ
- 17 カスタムデータ属性をセレクタに使う
- 18 複数の属性セレクタを同時に使う
- 19 互換性/テスト
- 20 Selectors Level 4 (CSS4)
- 21 属性セレクタでインラインスタイルを扱う方法
- 22 括弧
使い方
参考:
複数のセレクタを指定する/絞り込むサンプル |ITSakura
セレクタの種類
単純セレクタ
- 要素型セレクタ
- クラスセレクタ
- ID セレクタ
- 全称セレクタ
- 属性セレクタ
結合子
- 隣接兄弟結合子
- 一般兄弟結合子
- 子結合子
- 子孫結合子
- 列結合子
擬似クラス
:hover
:focus
:visited
:active
:enabled
:disabled
:checked
:required
:valid
:invalid
:empty
など
擬似要素
HTML に含まれていないエンティティ
::before
::after
::placeholder
::first-letter
::first-line
など
参考:
:first-child
兄弟要素の中で、最初の要素を表す擬似クラス。
参考:
:last-child
兄弟要素の中で、最後の要素を表す擬似クラス。
参考:
:only-child
唯一の子要素を表す擬似クラス。
参考:
:nth-child()
兄弟要素の中で、要素を位置に基づいて選択する。
参考:
要素の指定にもう迷わない?:nth-child() の of フィルターを使ったラクラク要素指定法 | ミツエーリンクス
:nth-last-child()
兄弟要素の中で、要素を最後から数えた位置に基づいて選択する。
参考:
:first-of-type
兄弟要素の中で、その種類の最初の要素を表す擬似クラス。
参考:
:last-of-type
兄弟要素の中で、その種類の最後の要素を表す擬似クラス。
参考:
:nth-of-type()
兄弟要素の中で、指定された型の要素を位置に基づいて選択する。
参考:
:nth-last-of-type()
兄弟要素の中で、指定された型の要素を最後から数えた位置に基づいて選択する。
参考:
:root
文書を表すツリーのルート要素を選択する。
参考:
:not
参考:
:empty
内容が空の要素を選択する。
参考:
子要素がないタグのスタイリングは :empty セレクタを使うと便利 – Qiita
要素が空の時のセレクタ :empty の使い方 | ハックノート
CSS 疑似要素の :empty でタグの中身が空のときのスタイルを設定する | Webrandum
CSS の便利な疑似セレクタ :empty と :blank、その違いと賢い使い方 | コリス
CSS3 疑似要素 :blank と :empty 試してみた | かもメモ
Is there a CSS selector for elements containing certain text? – Stack Overflow
クラス名における大文字/小文字の取り扱い
参考:
id 名/class 名に使用できる文字の種類 – GitHub Gist
属性セレクタ
[attr]
:指定された名前の属性を持つ要素を選択する。[attr=value]
:指定された属性が指定された値を持つ要素を選択する。[attr^=value]
:指定された属性の値が指定された値で始まる要素を選択する。[attr$=value]
:指定された属性の値が指定された値で終わる要素を選択する。
参考:
カスタムデータ属性をセレクタに使う
参考:
HTML タグの中の data とは何か?カスタムデータ属性 (data 属性と dataset) の使い方やメリットを実例で解説/data 属性と値を指定してスタイルを変える方法 | Proぐらし
複数の属性セレクタを同時に使う
div[data-size="large"][data-color="red"] { /* ... */ }
Code language: CSS (css)
参考:
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
括弧
参考: