複数の要素に同じクラス名を指定する

解説

「要素名.クラス名」のように、特定の要素にのみ適用するスタイルシートをクラス名で指定している場合でも、「他の要素名.同名のクラス」のように同名のクラス名を他の要素に指定したり、単独で「.同じクラス名」など、同じクラス名を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

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!