セレクタにクラス名を指定する

タグの属性で、次のようなクラス名を指定することができます。
<○○ class="クラス名">　このクラス名をスタイルの施すセレクタで指定する方法です。
なおこれを使わなくても文脈セレクタや隣接セレクタでできるパターンがあります。

セレクタにクラス名を指定する。

headで指定したセレクタの設定は、そのページ全体に適用されます。

<html><head>	<title> セレクタのクラス名　</title>
  <style type="text/CSS">
	span { background-color: aqua; }
  </style>
</head>
<body>
<p>
<span>あ</span>い<span>う</span>え<span>お</span></p>
</body>
</html>

上記のHTMLはブラウザで次のように見えます。

あいうえお

この方法は便利ですが、部分的に変更することができません。 例えば、次のように一部が異なる設定に対応ききません。

あいうえお

このような場合、セレクタでクラス名を付けることで解決でき、しかも便利に使えます。
まず<head>の中の <style type="text/css>内におけるセレクタは次のような書式で指定します。
要素名.クラス名 { プロパティ名: 値; }　　　　　　『.のドットの直後は隙間なくクラス名を続ける』
要素名とは、タグの名前です。そして利用する<body>内では、次のようにclassで名前を指定して使います。
<要素名 class="クラス名" >

以下で具体例を示します、 spanの要素名に、 AQ と FU　のクラス名を付け、それで指定する例です。

<html><head>	<title> セレクタのクラス名　</title>
  <style type="text/CSS">
	span.AQ { background-color: aqua; }
 	span.FU { background-color: fuchsia; }
  </style>
</head>
<body>
<p>
<span class="AQ">あ</span>い<span class="FU">う</span>え<span class="AQ">お</span></p>
</body>
</html>

次は上記に対して、クラス名を付けないspanを追加し、そこでイタリック文字にしてサイズを24ptに変更しています。また、span.FUでも文字サイズを16ptに変更しています。
確認で分かると思いますが、クラス名を付けないspanスタイル指定が全ての spanの要素に反映しています。それを、クラス名を指定したspanで特別に変更しています。
(span.AQとspan.FUで個々の背景色を変更、pan.FUではさらに文字サイズも変更しています。)

<html><head>	<title> セレクタのクラス名　</title>
  <style type="text/CSS">
  	span { fount-style: italic; font-size: 24pt; }
	span.AQ { background-color: aqua; }
 	span.FU { background-color: fuchsia;  font-size: 16pt;}
  </style>
</head>
<body>
<p>
<span class="AQ">あ</span>い<span class="FU">う</span>え<span class="AQ">お</span></p>
</body>
</html>

つまり、要素名に対して行ったスタイルが全ての対応要素に反映するが、クラス名を付けたスタイル指定の指示の方が優先的に働くということです。

　なお、上記ではspan要素でクラス名を指定していますが、任意の要素に対して使えます。また、要素のタグ名を指定しないクラス名だけのセレクタも可能です。