*【汎用セレクタ】
E【タイプセレクタ】
E.classname【クラス セレクタ】
E#idname【ID セレクタ】
メモ 外部リンク 構文 例
メモ
- 全て・タイプ・クラス・ID 指定された要素に適用するセレクタ
- 要素については、HTML5 リファレンス メモ 参照
外部リンク
構文
| セレクタ | 説明 | |
|---|---|---|
| 汎用セレクタ 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>用語１<dd>説明１
<dt>用語２<dd>説明２
</dl>
- 用語１
- 説明１
- 用語２
- 説明２
【クラス セレクタ】
<style>
li.class1 { font-weight: bold; }
li.class2 { color: red; }
.class3 { color: red; }
</style>
<ul>
<li class="class1">リスト１
<li class="class2">リスト２
<li>リスト３
</ul>
<ul class="class3">
<li>リスト１
<li>リスト２
<li>リスト３
</ul>
- リスト１
- リスト２
- リスト３
- リスト１
- リスト２
- リスト３
【id セレクタ】
<style>
li#id1 { font-weight: bold; }
li#id2 { color: red; }
#id3 { color: red; }
</style>
<ol>
<li id="id1">リスト１
<li id="id2">リスト２
<li>リスト３
</ol>
<ol id="id3">
<li>リスト１
<li>リスト２
<li>リスト３
</ol>
- リスト１
- リスト２
- リスト３
- リスト１
- リスト２
- リスト３