CSS講座
スタイルの重ねがけ・優先順位
CSSで多くのスタイルを適用していくと、必ず直面することになるのが、スタイルの優先順位です。
下に書いたものほど優先される
例えば、一つの要素にいくつも、同じプロパティを指定してみましょう。
p {
color: red;
color: green;
color: blue;
}
上の例だと、p で囲まれた文字列は何色で表示されるのでしょうか？赤？緑？それとも青？
実際に確かめてみると良いでしょう。答えは、青色です。
CSSのルールでは、上のほうに書かれたプロパティより、下のほうに書かれたプロパティの方が優先されます。
では、次はどうなるでしょうか？
p { color: red }
p { color: green }
p { color: blue }
これも、答えは青色です。理由は全く同じです。タイプセレクタを一つに書いても、分けて書いてもやはり下のほうにあるプロパティが優先されます。
下にあるものほど優先されるというのは、classで指定した場合も同様に成り立ちます。id は複数指定することが出来ないので、考えることは出来ません。
p.red { color: red }
p.green { color: green }
p.blue { color: blue }
<p class="red green blue">文字列</p>
上の例は複数の class でスタイルを適用した場合ですが、これも青色で表示されます。
もし、HTMLを次のように書いたらどうなるでしょうか？
<p class="blue green red">文字列</p>
結果は変わりません。あくまで、CSSのプロパティが書かれた順番ですので、当然青色で表示されます。
タイプ, class, idセレクタ の優先順位
次のようなCSSを適用した場合、HTMLはどのように表示されるでしょうか？
p.green { color: green }
p { color: red }
<p class="green">文字列</p>
タイプセレクタ（タグ名）で赤色という指定と、classで緑色という２つの指定がされています。
この場合、赤色という指定のプロパティの方が下にあるのですが、セレクタには優先順位が存在しています。そのため、classセレクタが優先されて、緑が適用されます。
各セレクタの優先順位は、タイプ < class < idと決められています。
さて、もし次のようなCSSとHTMLなら、どのように表示されるでしょうか？
p.green { color: green }
p#red { color: red }
p { color: blue }
<p class="green" id="red">文字列</p>
この場合も同様に、idでの指定が一番優先され、表示される文字列は赤色です。
とりあえず、タイプ < class < idの順番を覚えておきましょう。
子孫セレクタの優先順位
子孫セレクタ・・・親要素 （半角スペース） 子要素 のような指定法です。
例えば、次のようなHTMLにCSSが適用された場合は、この子孫セレクタの方が優先されます。
p { color: green }
div p { color: red }
<div><p>文字列</p></div>
つまり、上の場合だと文字列は赤色で表示されます。
では、次の場合はどうなるでしょうか？
p.green { color: green }
div p { color: red }
<div><p class="green">文字列</p></div>
今回は、親要素のclass属性によって優先され、文字列は緑で表示されることになります。当然、親要素の指定がidの場合も同様に、子孫セレクタが優先されます。
したがって、タイプ < 子孫 < class < idの順番になります。
では、次の場合はどうなるでしょうか？今度は親要素にclass属性が指定されています。
p.green { color: green }
div.parent p { color: red }
<div class="parent"><p class="green">文字列</p></div>
この場合、親要素のclass属性があるために、子孫セレクタの方が優先され、文字列は赤色で表示されます。
classではなく、idセレクタと親要素にclass属性がある子孫セレクタで比較した場合はidセレクタの方が優先されます。
したがって、タイプ < class < 子孫（親要素にclass付き） < idとなります。
では、親要素にid属性が付いている場合はどうなるでしょうか。例えば、以下のような場合です。
p#green { color: green }
div#parent p { color: blue }
<div id="parent"><p id="green">文字列</p></div>
この場合は、親要素のid属性よりも、子要素のid属性が優先されます。
したがって、優先順位はタイプ < class < 子孫（親要素にid付き） < idとなります。
・・・ややこしいですね（汗）・・・それで、さらに厄介なことに、子孫セレクタはネスト（入れ子に）出来ます。
つまり・・・
div.box p ul li.link a#top img {
・・・
}
のような指定をすることも出来るのです。
! important
実は、最重要宣言と呼ばれるものがあります。使い方は、下記の通り。
p { font-weight: bold ! important; }
この宣言が付いたプロパティは、どのセレクタによる指定よりも優先されます。ただし、どうしても・・・という場所以外は使用しないほうが良いでしょう。収拾が付かなくなってしまいます。
結論？
まずは、次のルールを覚えましょう。
- タイプ < class < id
次に、子孫セレクタが加わった場合が３パターン。
- タイプ < 子孫（親要素に何もなし） < class < id
- タイプ < class < 子孫（親要素にclass付き） < id
- タイプ < class < id < 子孫（親要素にid付き）
・・・で、なんとなく、優先される度合いは分かりました？
後は実際にご自身で試行錯誤しながら、直感を磨いていただければ・・・CSSレイアウトを始めると、そのうち優先順位で悩むことがくるでしょう。
