セレクタの種類(パターン・マッチング規則)
アセンブラの魔女 ⧫ CSS ⧫ セレクタ ⧫ セレクタの種類
アセンブラの魔女 ⧫ CSS ⧫ セレクタ ⧫ セレクタの種類

 セレクタは、次のようなパターン・マッチング規則(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セレクタ

疑似クラス
疑似要素

▼ Property
記事情報
datePublished2011-01-01
dateModified2018-06-22
authorアセンブラの魔女
headlineセレクタの種類(パターン・マッチング規則)に関する記事です
keywordsCSS
keywordsCascading Style Sheets
keywordsセレクタ
keywordsselector
publisher name= wiredFish, logo.name= wiredFish, logo.url= https://books-nekoya.jp/Programming/chigu-hagu-title-01.png size= 208 pixel x 50 pixel
image.url url= https://books-nekoya.jp/Programming/chigu-hagu-title-01.png , size= 208 pixel x 50 pixel