CSSのセレクタについて一覧をメモ書き
結合子
| セレクタ | 例 | 概略 | ||
|---|---|---|---|---|
| D E | div p | <h2>見出しｈ３</h2> <div> <p>テキスト</p> <p>テキスト</p> </div> | p以下に適用 | D要素の子孫となるE要素に適用 |
| D > E | div > p | pに適用 | D要素の子となるE要素に適用 | |
| D + E | div + p | 1つ目のpに適用 | D要素の直後に隣接しているE要素に適用 | |
| D ~ E | h2 ~ div | divに適用 | E要素の後ろにある同じ階層のF要素 | |
属性セレクター
| セレクタ | 例 | 概略 | ||
|---|---|---|---|---|
| E[foo] | div[class] | <div class=”xxx”> | 要素がfoo属性を持つ場合に適用 | |
| E[foo=”bar”] | div[class=”bar”] | <div class=”bar”> | 要素のfoo属性の値にbarを持つ場合に適用 | |
| E[foo~=”bar”] | div[class~=”bar”] | <div class=”bar baz”> | 要素のfoo属性の値が空白区切りで1つ以上ある時、その内の一つと完全一致した場合に適用 | |
| E[foo|=”bar”] | div[class|=”bar”] | <div class=”bar-baz”> | 要素のfoo属性の値が完全一致または「-」で区切られた値の「-」より前が完全一致した場合に適用 | |
| E[foo^=”bar”] | div[class^=”bar”] | <div class=”barbaz”> | 要素のfoo属性の値がbarで始まる場合に適用 | |
| E[foo$=”bar”] | div[class$=”bar”] | <div class=”bazbar”> | 要素のfoo属性の値がbarで終わる場合に適用 | |
| E[foo*=”bar”] | div[class*=”bar”] | <div class=”xxxbarbaz”> | 要素のfoo属性の値にbarを含む場合に適用 | |
| E[foo^=”bar” i] | div[class^=”b” i] | <div class=”Baz”> | フラグ「i」があるため適用 | 大文字小文字の区別をしないフラグとして「i」を追加 |
ツリー構造擬似クラス
| セレクタ | 例 | 概略 | ||
|---|---|---|---|---|
| :root | :root p | <p>テキスト</p> | HTML文書のルート要素を指定する。htmlより:rootの方が優先度が高い。!importantを使いたくない時に | |
| E:first-child | div:first-child | <div> <h2>見出しh２</h2> <p>テキストp１</p> <p>テキストp２</p> <h3>見出しh３</h3> </div> | h2が適用 | 親要素内の最初の要素に適用（:nth-child(1)と同じ意） |
| E:first-of-type | p:first-of-type | 1つ目のpが適用 | 親要素内の最初のその種類の要素に適用（:nth-of-type(1)と同じ意） | |
| E:nth-child(n) | div:nth-child(2) | 1つ目のpが適用 | 親要素内のn番目の要素に適用 | |
| E:nth-of-type(n) | p:nth-of-type(2) | 2つ目のpが適用 | 親要素内のn番目のその種類の要素に適用 | |
| E:nth-last-child(n) | div:nth-last-child(2) | 2つ目のpが適用 | 親要素内の後ろから数えてn番目の要素に適用 | |
| E:nth-last-of-type(n) | p:nth-last-of-type(2) | 1つ目のpが適用 | 親要素内の後ろから数えてn番目のその種類の要素に適用 | |
| E:last-child | div:last-child | h3が適用 | 親要素内の最後の要素に適用（:nth-last-child(1)と同じ意） | |
| E:last-of-type | p:last-of-type | 2つ目のpが適用 | 親要素内の最後のその種類の要素に適用（:nth-last-of-type(1)と同じ意） | |
| E:only-child | h2:only-child | h2以外にpがあるため適用されない | 親要素内に要素として1つしかない場合に適用 | |
| E:only-of-type | h2:only-of-type | h2は1つだけなので適用 | 親要素内にその種類の要素として1つしかない場合に適用 | |
| E:empty | div:empty | <div></div> | div内が空なので適用 | 要素内容が空白文字または空の場合に適用 |
その他擬似クラス
| セレクタ | 例 | 概略 | ||
|---|---|---|---|---|
| E:link | a:link | href属性を持つ未訪問の要素に適用 | ||
| E:visited | a:visited | href属性を持つ訪問済の要素に適用 | ||
| E:target | ページ内リンクのリンク先に適用 | |||
| E:hover | a:hover | カーソルが要素に乗った時に適用 | ||
| E:active | a:active | 要素をクリック中に適用 | ||
| E:focus | input:focus | inputなどで入力状態の時、タブ移動でフォーカスがあたった時などに適用 | ||
| E:lang(jp) | 特定の言語コードが指定された要素にスタイルを適用 | |||
| E:Enabled | input:Enabled | inputなどでdisabled属性がついていない要素に適用 | ||
| E:disabled | input:disabled | inputなどでdisabled属性がついている要素に適用 | ||
| E:checked | input:checked | inputなどでchecked属性がついている要素に適用 | ||
| E:not(foo) | fooセレクタに当てはまらない場合に適用 | |||
| :defined | div:not(:defined) | CustomElementRegistry.define() メソッドを使用して定義されているすべての要素に適用 | ||
疑似要素
| セレクタ | 例 | 概略 | ||
|---|---|---|---|---|
| E::before | 要素の内容の前に指定した内容を挿入 | |||
| E::after | 要素の内容の後ろに指定した内容を挿入 | |||
| E::first-line | p::first-line | 要素内の先頭1行に対して適用。先頭1行は要素の幅などにより変わる（可変する） | ||
| E::first-letter | p::first-letter | 要素内の先頭1文字に対して適用 | ||
コメント