CSSで特定の要素にスタイルを適用したい場合、様々な指定方法があるのでまとめておきます。
全要素への適用
HTML
|
1 2 3 4 5 6 |
<div>divタグテキスト1 <div>divタグ直下の子テキスト <div >divタグ直下の孫テキスト </div> </div> </div> |
CSS
全要素へスタイルを適用する場合は「*」(アスタリスク）を指定します。
|
1 2 3 4 |
* { font-size:20px; font-weight:bold; } |
サンプル
divタグテキスト1
divタグ直下の子テキスト
divタグ直下の孫テキスト
IDセレクタへの適用
HTML
|
1 2 3 4 5 6 7 |
<div id="cssSelecterSample1">divタグテキスト1 <div>divタグ直下の子テキスト <div>divタグ直下の孫テキスト </div> </div> </div> <div id="cssSelecterSample2">divタグテキスト2 |
CSS
IDセレクタへスタイルを適用したい場合はID名の先頭に「#」を付けて指定します。
|
1 2 3 4 |
#cssSelecterSample2{ font-size:20px; font-weight:bold; } |
サンプル
divタグテキスト1
divタグ直下の子テキスト
divタグ直下の孫テキスト
divタグテキスト2
クラスセレクタへの適用
HTML
|
1 2 3 4 5 6 |
<div">divタグテキスト1 <div class="cssSelecterSample3">divタグ直下の子テキスト <div class="cssSelecterSample3">divタグ直下の孫テキスト </div> </div> </div> |
CSS
クラスセレクタへスタイルを適用する場合はクラス名の先頭に「.」(ドット)を指定します。
|
1 2 3 4 |
.cssSelecterSample3{ font-size:20px; font-weight:bold; } |
サンプル
divタグテキスト1
divタグ直下の子テキスト
divタグ直下の孫テキスト
子孫要素への適用
HTML
|
1 2 3 4 5 6 |
<div>divタグテキスト1 <div>divタグ直下の子テキスト <div>divタグ直下の孫テキスト </div> </div> </div> |
CSS
子孫要素へスタイルを適用する場合はセレクタ間に半角スペースを指定します。
|
1 2 3 4 |
div div { font-size:20px; font-weight:bold; } |
サンプル
divタグテキスト1
divタグ直下の子テキスト
divタグ直下の孫テキスト
子要素への適用
HTML
|
1 2 3 4 5 6 |
<div id="cssSelecterSample3">divタグテキスト1 <p>divタグ直下のpタグテキスト1</p> <div>divタグ直下のdivタグテキスト1 <p>divタグ直下のpタグテキスト2</p> </div> </div> |
CSS
子要素へスタイルを適用する場合はセレクタ間に「>」（大なり）を指定します。
|
1 2 3 4 |
#cssSelecterSample3>p { font-size:20px; font-weight:bold; } |
サンプル
divタグテキスト1
divタグ直下のpタグテキスト1
divタグ直下のdivタグテキスト1
divタグ直下のpタグテキスト2