*【汎用セレクタ】
E【タイプセレクタ】
E.classname【クラス セレクタ】
E#idname【ID セレクタ】

メモ

構文

セレクタ説明
汎用セレクタ

ns:名前空間
* { 【スタイル定義】 } 全ての要素に適用
ns|*  { 【スタイル定義】 } @namespace【名前空間】で指定されたns内の全ての要素に適用
*|*  { 【スタイル定義】 } 全ての名前空間の全ての要素に適用
|*  { 【スタイル定義】 } 名前空間外の全ての要素に適用
タイプセレクタ

ns:名前空間
E { 【スタイル定義】 } E要素に適用
ns|E  { 【スタイル定義】 } @namespace【名前空間】で指定されたns内のE要素に適用
*|E  { 【スタイル定義】 } 全ての名前空間のE要素に適用
|E  { 【スタイル定義】 } 名前空間外のE要素に適用
クラス セレクタ

classname:クラス名
E:省略可能 (* 指定)
*.classname.classname
E.classname  { 【スタイル定義】 }

全要素の省略形
.classname  { 【スタイル定義】 }
指定クラスのE要素に適用
ID セレクタ

idname:id属性名
E:省略可能 (* 指定)
*#idname#idname
E#idname  { 【スタイル定義】 }

全要素の省略形
#idname  { 【スタイル定義】 }
指定id属性のE要素に適用

汎用セレクタ
<style>
* { color: red; }
</style>

実装すれば、別の指定が無い全ての要素が赤色

タイプセレクタ
<style>
dt { font-weight: bold; }
dd { color: red; }
</style>

<dl>
  <dt>用語1<dd>説明1
  <dt>用語2<dd>説明2
</dl>
用語1
説明1
用語2
説明2
クラス セレクタ
<style>
li.class1 { font-weight: bold; }
li.class2 { color: red; }
.class3   { color: red; }
</style>

<ul>
<li class="class1">リスト1
  <li class="class2">リスト2
<li>リスト3
</ul>

<ul class="class3">
  <li>リスト1
  <li>リスト2
  <li>リスト3
</ul>
  • リスト1
  • リスト2
  • リスト3
  • リスト1
  • リスト2
  • リスト3
id セレクタ
<style>
li#id1 { font-weight: bold; }
li#id2 { color: red; }
#id3   { color: red; }
</style>

<ol>
<li id="id1">リスト1
  <li id="id2">リスト2
<li>リスト3
</ol>

<ol id="id3">
  <li>リスト1
  <li>リスト2
  <li>リスト3
</ol>
  1. リスト1
  2. リスト2
  3. リスト3
  1. リスト1
  2. リスト2
  3. リスト3

関連