セレクタは、次のようなパターン・マッチング規則(pattern matching rules)により表現され、これにマッチする要素にセレクタの後の構文で定義されるスタイル(プロパティ:値)が適用されます。
link、activeなどの疑似要素は、構文の最後に追加することができます。この場合スタイルは、マッチしたそれぞれの要素の一部分に適用されます。
パターン | 意味 | 詳細 |
---|---|---|
* | すべての要素にセレクタ以降で定義されるスタイルを適用 | ユニバーサル・セレクタ |
E | すべてのE 要素にセレクタ以降で定義されるスタイルを適用 使用例:div { font-size:40px; } | 型セレクタ |
E F | E 要素の子孫のすべての F 要素にセレクタ以降で定義されるスタイルを適用 | ディセンダント(子孫)セレクタ |
E > F | E 要素の直下のすべての F 要素にセレクタ以降で定義されるスタイルを適用 | チャイルド・セレクタ |
E:first-child | 要素 E が親要素の最初の要素の場合、セレクタ以降で定義されるスタイルを適用 | first-child疑似クラス・セレクタ |
E:link | E 要素がまだ訪れていないターゲットへのハイパーリンクの場合、その E 要素にセレクタ以降で定義されるスタイルを適用 | リンク疑似クラス・セレクタ |
E:visited | E 要素がまだ訪問済みのターゲットへのハイパーリンクの場合、その E 要素にセレクタ以降で定義されるスタイルを適用 | |
E:active | E 要素がユーザーのアクティベート・アクションを待っているときに、セレクタ以降で定義されるスタイルを適用 | ダイナミック疑似クラス・セレクタ |
E:hover | E 要素がユーザーのホバー・アクションを待っているときに、セレクタ以降で定義されるスタイルを適用 | |
E:focus | E 要素がユーザーのフォーカス・アクションを待っているときに、セレクタ以降で定義されるスタイルを適用 | |
E:lang(c) | c で与えられる言語IDの意味する言語によるE 型の要素に、セレクタ以降で定義されるスタイルを適用 | lang()疑似クラス・セレクタ |
E + F | 隣接セレクタ(adjacent selector)は、ある要素E の直後にある兄弟要素 F に、セレクタ以降で定義されるスタイルを適用 | 隣接セレクタ |
E[foo] | foo で与えられる属性を持つすべての E 要素にセレクタ以降で定義されるスタイルを適用 | 属性セレクタ |
E[foo=val] | foo で与えられる属性の値がvalであるすべての E 要素にセレクタ以降で定義されるスタイルを適用 | |
E[foo~=val] | 指定した属性値と要素の属性値が完全に一致、または要素の属性値が半角スペースで区切られた文字列であり、その部分文字列の一つが指定した属性値に一致する場合にスタイルを適用 | |
E[foo|=val] | 指定した属性値と要素の属性値が完全に一致、または要素の属性値が指定した属性値で始まり、その後に'-'(U+002D)が続く場合にスタイルを適用 | |
E.class_name | 言語依存 HTMLではE[class~=class_name]と等価 | クラス・セレクタ |
E#myid | ID値が myid に一致するすべての E 要素にセレクタ以降で定義されるスタイルを適用 | IDセレクタ |