CSS:セレクタのバリエーション

CSS の書式、
  セレクタ {属性: 値;}
のセレクタのバリエーションについて説明します。

●＊

全ての要素に適用されます。
  * {color: red}
としたら、全ての文字色が赤になります。

# ブラウザ毎に異なる初期設定をキャンセルして、
# 設定の差異をなくす、
# といった使い方ができます。

●要素名

要素名で指定したタグ内のみ有効になります。
  th {color: red}
としたら、
th タグ全体に作用します。
たとえば、
<th>この文字が赤になります。</th>

# テーブルの見出しセルの色を統一する、
# といった使い方ができます。

●.クラス名

  .c_name {color: red}
としたら、
HTML 中、クラス名に "c_name" を指定したタグに作用します。
# クラス名の前に「ドット」を忘れないようにします。

たとえば、
<span class="c_name">この文字が赤になります。</span>
<div  class="c_name">この文字も赤になります。</div>

# 複数のタグで、同じ文字の大きさを適用する、
# といった使い方ができます。

●#ID名

  #id_name {color: red}
HTML 中、ID名に "id_name" を指定したタグに作用します。
たとえば、
<span id="id_name">この文字が赤になります。</span>

# ID は、HTML のファイル内でタグを一意に特定するための仕組みです。
# 特定の場所だけにスタイルを適用する、
# といった使い方ができます。
# サンプル・プログラムでは使用していませんが。

●要素名.クラス名

  th.c_name {color: red}
としたら、
クラス名 "c_name" の th タグだけに作用します。
たとえば、
<table>
  <th class="c_name">この文字が赤になります。</th>
  <td class="c_name">この文字は赤になりません。</td>
</table>

●セレクタ,セレクタ

それぞれのセレクタに同じスタイルを適用します。
  .class1, .class2 {color: red}
としたら、
クラス名 "class1", "class2" のタグに作用します。

●セレクタ セレクタ

左のセレクタに該当するタグの中にある、
右のセレクタに、スタイルを適用します。
  .class1 th {color: red}
としたら、
クラス名 "class1" の中の th タグのみに作用します。
たとえば、
<span class="class1">
  <table>
    <th>この文字が赤になります。</th>
    <td>この文字は赤になりません。</td>
  </table>
</span>
<span class="class2">
  <table>
    <th>この文字は赤になりません。</th>
    <td>この文字は赤になりません。</td>
  </table>
</span>