CSS-クラスセレクタ
クラスセレクタとは
クラスセレクタは、「class属性」によってクラス名が付けられた要素に対してスタイルを適用します。
「class属性」は「id属性」とは異なり、同一文書内で同じクラス名を重複して指定することができます。
クラスセレクタを使用することで、文書内の複数要素に対して同じスタイルを適用することができます。
クラスセレクタの記述
クラス名はピリオド「.」に続けて記述します。
クラス名には以下の禁則事項があります。
- 大文字と小文字の区別があります。
- 使用できる文字は、半角の英数字、ハイフン、アンダーバーです。
- アンダーバーをクラス名に含めると、一部の古いブラウザではクラス名が認識されなくなります。
- 先頭文字はアルファベットとする必要があります。先頭文字に数字や記号は使用できません。
クラス名だけで指定する
クラスを指定した全ての要素に適用されます。
.classname1 { color: blue; }
<p><em class="classname1">文字色は青</em>です。</p>
要素名とクラス名を指定する
要素名に続けてクラス名を指定すると、そのタイプの要素でのみクラスの指定が適用されます。
p.classname2 { color: red; }
<p class="classname2">文字色は赤です。</p>
子孫セレクタの形式を指定する
子孫セレクタ（セレクタを半角スペースで区切る記述）の定義により、特定の範囲内にある要素にのみスタイルを適用させることができます。
下記例では、classname3が指定されたdiv要素内のp要素にのみ、color: red が適用されることになります。
それ以外のp要素にはスタイルは適用されません
div.classname3 p { color: red; }
<div class="classname3">
<p>スタイルが適用されます</p>
</div>
<div>
<p>スタイルが適用されません</p>
</div>