Webデザイン時のHTML・CSSコーディングにおけるCSSセレクタの優先順位の出し方

1年以上前の記事です。内容が古い可能性があります。

WebデザインにおいてHTML同様重要となってくるCSS（カスケードスタイルシート）に関して、セレクタの優先順位をまとめてみることにしました。
同じプロパティが各セレクタに書かれている場合、優先順位の高いセレクタに対して書かれたプロパティ値の方が適応されるというわけです。

よくわかるHTML5+CSS3の教科書

posted with ヨメレバ

大藤 幹 マイナビ 2012-07-28

Amazon

楽天ブックス

7net

honto

ブックオフ

e-hon

インラインによる表記はセレクタではありませんが入れておきました。
また、擬似セレクタ（a:hover等）に関してはタグに対する表記と同じ「1」となります。

以上を子孫セレクタ表記の場合は全て足してあげればいいということになります。
例えば以下の様なHTMLがあった場合、

H1に対しては以下の様なセレクタが考えられます。

• h1
• .catch
• #header h1
• #header .catch
• .head h1
• .head .catch
• div h1
• div .catch

これをそれぞれ数値化して足し算したのが以下。

• h1＝1
• .catch＝10
• #header h1＝100＋1＝101
• #header .catch＝100＋10＝110
• .head h1＝10＋1＝11
• .head .catch＝10＋10＝20
• div h1＝1＋1＝2
• div .catch＝1＋10＝11

となるわけで、それぞれ同じプロパティが書かれていた場合、優先順位の一番高い「#header .catch」に書かれた値になるとこういうわけです。
当然、「#header .catch」に該当のプロパティが書かれていなければ、次の「#header h1」の値になります。

なお、数値が全く同じ場合（上記の「.head h1」と「div .catch」等）はCSSファイル内において下に書かれたものが適応されるようになっています。
この辺りは擬似セレクタ（a:hover、a:visited等）を書くときに順番を気にしなければならないのと同じ仕組ですね。

今までは、最終手段としてインライン表記をよく利用していましたが、これからは子孫セレクタに親を追加してあげるというのも、書いたCSSが適応されない時の対策として有効だなと感じました。

なお、「!importantルール」を使って優先順位を操作するという方法もあります。
これに関してはまたいずれ。