セレクター(どのHTMLの要素名について選択(適用)させるか)
説明 | 例 | |
要素名{} | 指定の要素にスタイルを適用する。 | h1{}, p{}, div{} |
*{} | 全ての要素にスタイルを適用する。(例の場合、body要素の子要素内にある全てのp要素に適用) | body * p{} |
.クラス名{} | 指定のクラス名を含む要素にスタイルを適用する。 | .aaa{} |
#ID名{} | 指定のID名を含む要素にスタイルを適用する。 | #aaa{} |
(親)要素名 (子孫)要素名{} | 親要素に含む指定の子孫要素にスタイルを適用する。 | p span.aaa{} |
(親)要素名 > (子)要素名{} | 親要素に含む指定の子要素にスタイルを適用する。 | div > p{} |
(子)要素名a + (子)要素名b{} | 同じ親要素内のa要素の直後のb要素にスタイルを適用する。 | h1 + p{} |
(子)要素名a ~ (子)要素名b{} | 同じ親要素内のaより後ろに記述されたbにスタイルを適用する。 | li ~ li{} |
要素名[属性]{} | [属性]を持つ要素名にスタイルを適用する。 | |