セレクタの優先順位

要素名だけの指定よりも、classやidの値を指定したセレクタ、セレクタを組み合わせた複合セレクタなど、より限定された部分を指定するセレクタが優先されます。

スタイルの指定(CSS)

[css]
p {
color: gray;
}
.red {
color: red;
}
#blue {
color: blue;
}
#blue em {
color: green;
}
[/css]

ソースコード(HTML)

[html]
<p class="red" id="blue">会社名 <em>株式会社アドワークス</em></p>
[/html]

上記のような場合、p要素でグレーと指定してありますが、redというclass属性の値を持つp要素に限定されますので、文字色は赤となります。
さらに、id属性#blueという指定がありますので、id属性の値がblueという要素は1つだけですので、さらに限定され文字色は青となります。
また、株式会社アドワークスという箇所はid属性と組み合わせた複合セレクタが指定されていますので、emで指定された文字色は緑となります。

より限定された範囲への指定が最優先されるということですね。

相反するスタイルの優先順位

同じセレクタで相反するスタイルが指定されている場合は、後から読み込まれる方、つまり下の行で指定されたスタイルが自動的に適用されます。

カテゴリー: CSS, HTMLの基礎知識, ナレッジノート, 属性   パーマリンク