解説
「要素名．クラス名」のように、特定の要素にのみ適用するスタイルシートをクラス名で指定している場合でも、「他の要素名．同名のクラス」のように同名のクラス名を他の要素に指定したり、単独で「．同じクラス名」など、同じクラス名をCSS内で複数定義することができます。
優先順序
同じクラス名を複数の要素に指定する場合は、各プロパティの優先順序に注意してください。
CSS内で「要素名.クラス名」のような記述と、同じクラス名で「.クラス名」とを記述した場合、スタイルシートの指定方法の1つである「<要素名 class=”クラス名”>…</要素名>」でスタイルシートを呼び出したときは、両者で指定したプロパティがすべて適用されます。
ただし、両者で同じプロパティが指定されていて、そのプロパティに対する値が両者異なる場合は、「要素名.クラス名」で指定したプロパティの値の方が優先されます。
CSS/HTMLサンプル
CSS
p.same_name { font-size:small; color:red; }
div.same_name { font-size:medium; color:blue; }
.same_name { background:#ffdff9; color:green; }
HTML
<p class=”same_name”>…</p>
<div class=”same_name”>…</p>
複数のセレクタに同じクラス名を指定した場合、各プロパティの優先順序はどうなるか サンプル
結果
実際の表示は以下のようになります。
| プロパティの優先度 | P要素での実際の表示 | DIV要素での実際の表示 |
|---|---|---|
| フォントサイズ（font-size） | small | medium |
| 文字色（color） | red | blue |
| 背景色（background） | #ffdff9 | #ffdff9 |
