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 | 現在の値が min および max 属性による制限範囲内にある <input> 要素。 |
| :invalid | <input> 要素や <form> 要素のうち内容が検証に失敗したもの。 |
| :is() | セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択。 |
| :lang() | 指定された言語に基づいて要素に一致。 |
| :last-child | 兄弟要素のグループの中で最後の要素。 |
| :last-of-type | 兄弟要素のグループの中でその種類の最後の要素。 |
| :link | まだ訪問されていない要素。 |
| :local-link (en-US) | 同じドキュメントへのリンク。 |
:matches() （旧式のセレクターで、 :is() の別名） | |
| :modal (en-US) | 相互作用が解除されるまで外部の要素とのすべての相互作用を除外する状態にある要素。 |
| :muted (en-US) | <audio> や <video>など、音を出すことができる要素を表しますが、ミュート (強制的に無音) されています。 |
| :not() | 列挙されたセレクターに一致しない要素。 |
| :nth-child() | 兄弟要素のグループの中での位置に基づいて選択。 |
| :nth-of-type() | 兄弟要素のグループの中で指定された型 (タグ名) の要素を位置に基づいて選択。 |
| :nth-last-child() | 兄弟要素のグループの中での位置に基づいて選択。 |
| :nth-last-of-type() | 兄弟要素のグループの中で指定された型の要素を最後から数えた位置に基づいて選択。 |
| :only-child | 兄弟要素がない要素。 |
| :only-of-type | 同じ型の兄弟要素がない要素。 |
| :optional | required 属性が設定されていない <input>, <select>, <textarea> 要素。 |
| :out-of-range | <input> 要素のうち、現在の値が min および max 属性で指定された範囲を外れている要素。 |
| :past (en-US) | :current に一致する要素より完全に前に出現する要素に一致する時間次元の疑似クラス。 たとえば、WebVTT によって表示されているキャプション付きのビデオ内です。 |
| :paused | [実験的な機能] 「再生中」または「停止中」の状態を持つ音声、動画、その他のリソースの要素が「停止中」である場合に一致。 |
| :picture-in-picture | 現在ピクチャインピクチャモードの要素。 |
| :placeholder-shown | プレイスホルダー文字列が表示されている <input> または <textarea> 要素。 |
| :playing | [実験的な機能] 「再生中」または「停止中」の状態を持つ音声、動画、その他のリソースの要素が「再生中」である場合に一致。 |
| :read-only | ユーザーが編集できない要素 (input や textarea など) 。 |
| :read-write | ユーザーが編集できる要素 (input や textarea など) 。 |
| :required | <input>, <select>, <textarea> 要素のうち required 属性が設定されているもの。 |
| :root | 文書を表すツリーのルート要素を選択します。 HTML では :root は <html> 要素を表し、詳細度が高いことを除けば html セレクターと同等。 |
| :scope | セレクターが選択する対象の参照点である要素。 |
| :seeking (en-US) | [Limited availability] 再生可能な要素がメディア リソース内の再生位置を探しているときに、<audio> <video>などの再生可能な要素を表す。 |
| :stalled (en-US) | 再生が停止しているときに再生可能な要素 <audio> , <video> を表す。 |
| :target | URL のフラグメントに一致する id を持つ固有の要素（ターゲット要素）を表す。 |
| :target-within (en-US) | [実験的な機能] ターゲット要素である要素、またはターゲットである要素を含む要素を表す。 ターゲット要素は、URL のフラグメントと一致する ID を持つ一意の要素。 |
| :user-invalid | ユーザーの操作の後、制約検証に基づき有効と判断されなかった検証済みのフォーム要素を表す。 |
| :user-valid | 制約検証に基づき値の検証が正しく行われた有効なフォーム要素を表す。ただし、 :valid とは異なり、ユーザーが操作した後にのみ一致。 |
| :valid | 内容物の検証に成功した <input> 要素 やその他の <form> 要素を表す。 |
| :visited | ユーザーが訪問したことがあるリンクに適用。 |
| :volume-locked (en-US) | [Limited availability] <audio> や <video>, などのサウンドを生成できる要素を表すが、メディア要素のオーディオ ボリュームは現在ユーザーによって「ロック」されている。 |
| :where() | セレクターリストを引数として取り、列挙されたセレクターのうちの何れかに当てはまるすべての要素を選択。 |
| :-webkit- 擬似クラス | WebKit または blink ベースのアプリケーションは、数多くの特殊な CSS の WebKit 拡張に対応。 |
| 属性セレクター | 指定された属性が存在するかどうか、またはその値に基づいて要素を選択。 |
| クラスセレクター | class 属性の内容に基づいて要素を選択。 |
| ID セレクター | id 属性の値に基づいて要素と一致。選択される要素の id 属性は、セレクターで指定した値と完全一致していなければならない。 |
| 要素型セレクター | ノード名で要素を一致。 |
| 全称セレクター | すべての種類の要素に一致。 |
