複数のセレクタでCSSを指定することができます。

■ 複数のセレクタをカンマで区切ってCSSを指定する

複数のセレクタをカンマで区切って同じスタイルを適用させることができます。 下の例は<p>～</p>、<div>～</div>、<span>～</span>内の 文字を赤色に適用させるように指定しています。1番目の外部ファイルは1行だけの記述ですが 2番目の外部ファイルの3行の記述と同じ効果があります。

p,div,span{color:red;}

<p>pタグ内のこの文章は赤色になります。</p>
<div>divタグ内のこの文章も赤色になります。</div>
<span>spanタグ内のこの文章も赤色になります。</span>

p{color:red;}
div{color:red;}
span{color:red;}

■ 要素名+クラス名をカンマで区切ってCSSを指定する

要素名+クラス名をカンマで区切って同じスタイルを適用させることもできます。 前項のように3行の記述が1行分の記述だけで済みます。

p.sample1,div.sample2,span.sample3{color:red;}

<p class="sample1">このpタグ内のこの文章は赤色になります。</p>
<div class="sample2">この文章も赤色になります。</div>
<span class="sample3">この文章も赤色になります。</span>

■ 複数のセレクタを半角スペースで区切ってCSSを指定する

複数のセレクタを半角スペースで区切って親要素内の子要素に対し スタイルを適用させることができます。

div span{color:red;}

<div>
<span>divタグ内のspanタグで囲まれた文章だけ赤色になります。</span>
<span>この文章も赤色になります。</span>
<span>この文章も赤色になります。</span>
</div>

■ 要素名+クラス名を半角スペースで区切ってCSSを指定する

要素名+クラス名を半角スペースで区切ってクラス名を使用した 親要素内のクラス名を使用した子要素に対し スタイルを適用させることができます。

下の例では
外部ファイルの1行目・・・<div class="oya">～</div>内の文字は フォントサイズ12pxになります。
外部ファイルの2行目・・・<p class="kodomo">～</p>の文章の行間は 1.5の高さになります。
外部ファイルの3行目・・・1行目のCSSに2行目のCSSを包括しているので フォントサイズ12pxかつ文章の行間1.5で尚且つ文字が赤色になります。

div.oya{font-size:12px;}
p.kodomo{line-height:1.5;}
div.oya p.kodomo{color:red;}

<div class="oya">
<p class="kodomo">
このdivタグ内のこのクラス名で囲まれた文章だけ赤色になります。
</p>
<p class="kodomo">この文章も赤色になります。</p>
<p class="kodomo">この文章も赤色になります。</p>
</div>

■ 全称セレクタ

全称セレクタで全てのセレクタにCSSを適用することができます。 セレクタの前にアスタリスク∗を記述します。

∗{
font-size:12px;
margin:0px;
width:200px;
}

<div>このdivタグ内の文字はフォントサイズ12pxになります。</div>
<p>このpタグ内の文字もフォントサイズ12pxになります。</p>
<h3>このh3タグ内の文章の上下の余白は0になります。</h3>
<hr>
hrタグで引かれた水平線は全て横幅200pxの長さになります。

■ その他の項目

・ スタイルシートの記述方法
・ スタイルシートの記述場所
・ 個別にCSSを指定する
・ @importでCSSファイルを読み込む
・ 外部ファイルのコメント

スタイルシート一覧のページに行く