Modified 2024-4-27
MDNより引用: https://developer.mozilla.org/ja/docs/Web/CSS/CSS_selectors
結合子とセパレーター
結合子とセパレーター | 概要 |
---|---|
+ (次兄弟結合子) | 2 つのセレクターを接続し、 2 つ目の要素が 1 つ目の要素の 直後 にあって、両者が同じ親要素 の子同士である場合に一致 |
> (子結合子) | 2 つ目のセレクターが 1 つ目のセレクターの直接の子要素の場合にのみ一致 |
|| (列結合子) | [実験的な機能] 前者のセレクターに一致する列要素に所属する、後者のセレクターに一致する要素に一致 |
~ (後続兄弟結合子) | 2 個のセレクターを結びつけ、 1 つ目の要素の後に 2 つ目の要素があり(直後である必要はない)、かつ両者が同じ親要素の子であるすべてのパターンに一致 |
” ” (子孫結合子) | 空白文字 (” “) で表される — は 2 つの CSS セレクターを結合し、 1 つ目のセレクターに一致する要素が祖先 (親、親の親、親の親の親、など) となっている 2 つ目のセレクターに一致 |
| (名前空間セパレーター) | 名前空間区切り文字 (|) はセレクターを名前空間から分離し、型セレクターの名前空間または名前空間の欠如を識別する |
セレクター
セレクター | 概要 |
---|---|
:active | よく <a> および <button> 要素で使われる。 |
:any-link | href 属性を持つすべての <a> または <area> 要素を選択。 |
:autofill | <input> 要素の値がブラウザーによって自動補完された時に一致する。 |
:blank | [実験的な機能] 空のユーザー入力要素 (例えば <input> や <textarea> ) を選択する。 |
:buffering (en-US) | [Limited availability] 再生可能な要素がメディア リソースをバッファリングしているときに、 <audio> or <video> などの再生可能な要素を表す。 |
:checked | ラジオボタン (<input type="radio"> )、 チェックボックス (<input type="checkbox"> )、 オプションボタン (<select> の中の <option> ) 要素がチェックされていたり on の状態にあったりすることを表す。 |
:current (en-US) | 表示されている要素または要素の祖先を表す時間次元の擬似クラス。この疑似クラスを使用して、WebVTT によってキャプション付きで表示されるビデオを表すことができる。 |
:current() (en-US) | 表示されている要素または要素の祖先を表す時間次元の擬似クラス。この疑似クラスを使用して、WebVTT によってキャプション付きで表示されるビデオを表すことができる。 |
:default | 関連する要素のグループ内で既定となっているフォーム上の要素を選択する。 |
:defined | 定義されているすべての要素を表す。ブラウザーに組み込まれたすべての標準要素と、 (CustomElementRegistry.define() メソッドを使用して) 定義に成功したカスタム要素が含まれる。 |
:dir() | 中に含まれる文字列の方向に基づいて要素を選択する。書字方向の意味的な値(ltr、rtl)、つまり、文書自体に設定されているもののみを使用する。 |
:disabled | 無効な要素を表す。無効な要素=アクティブ化(選択、クリック、入力など)したりフォーカスを得たりすることができない要素。 |
:empty | 子を持たない要素を表す。 |
:enabled | すべての有効な要素を表す。有効な要素=アクティブ化 (選択、クリック、入力など) したりフォーカスを得たりすることができる要素。 |
:first-child | 兄弟要素のグループの中で最初の要素を表す。 |
:first-of-type | 兄弟要素のグループの中でその種類の最初の要素を表す。 |
:focus | フォーカスを持っている要素を表す。 |
:focus-visible | 要素が :focus 擬似クラスに一致している時で、ユーザーエージェントが要素にフォーカスを明示するべきであると推測的に判断した場合に適用される。 |
:focus-within | 要素または子孫要素にフォーカスがある場合に一致。(シャドウツリーにおける子孫も含む。) |
:fullscreen | 現在全画面モードにあるすべての要素に一致。safari 未対応。 |
:future (en-US) | :current に一致する要素の後に完全に出現する要素に一致する。 たとえば、WebVTT によって表示されているキャプション付きのビデオ内です。 |
:has() | 引数として渡される相対セレクターのいずれかが、その要素から辿ってアンカーとして少なくとも一つの要素とマッチする場合にその要素を表す。 |
:hover | |
:indeterminate | |
:in-range | |
:invalid | |
:is() | |
:lang() | |
:last-child | |
:last-of-type | |
:link | |
:local-link (en-US) | |
:matches() (旧式のセレクターで、 :is() の別名) | |
:modal (en-US) | |
:muted (en-US) | |
:not() | |
:nth-child() | |
:nth-of-type() | |
:nth-last-child() | |
:nth-last-of-type() | |
:only-child | |
:only-of-type | |
:optional | |
:out-of-range | |
:past (en-US) | |
:paused | |
:picture-in-picture | |
:placeholder-shown | |
:playing | |
:read-only | |
:read-write | |
:required | |
:root | |
:scope | |
:seeking (en-US) | |
:stalled (en-US) | |
:target | |
:target-within (en-US) | |
:user-invalid | |
:user-valid | |
:valid | |
:visited | |
:volume-locked (en-US) | |
:where() | |
:-webkit- 擬似クラス | |
属性セレクター | |
クラスセレクター | |
ID セレクター | |
要素型セレクター | |
全称セレクター |