Webデザイン時のHTML・CSSコーディングにおけるCSSセレクタの優先順位の出し方
1年以上前の記事です。内容が古い可能性があります。
WebデザインにおいてHTML同様重要となってくるCSS(カスケードスタイルシート)に関して、セレクタの優先順位をまとめてみることにしました。
同じプロパティが各セレクタに書かれている場合、優先順位の高いセレクタに対して書かれたプロパティ値の方が適応されるというわけです。
これは、各セレクタを数字に置き換えると分かりやすいです。
各セレクタの数値は以下のようになります。
セレクタ | 数値 |
インラインによる表記 (style=”color:red;”) |
1000 |
IDによる表記 (例:#wrapper) |
100 |
classによる表記 (例:.kakomi) |
10 |
各タグに対する表記 (例:h1) |
1 |
インラインによる表記はセレクタではありませんが入れておきました。
また、擬似セレクタ(a:hover等)に関してはタグに対する表記と同じ「1」となります。
以上を子孫セレクタ表記の場合は全て足してあげればいいということになります。
例えば以下の様なHTMLがあった場合、
<h1 class="catch">こんにちは</h1>
</div>
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=100+10=110
- #header h1=100+1=101
- .head .catch=10+10=20
- .head h1=10+1=11
- div .catch=1+10=11
- .catch=10
- div h1=1+1=2
- h1=1
となるわけで、それぞれ同じプロパティが書かれていた場合、優先順位の一番高い「#header .catch」に書かれた値になるとこういうわけです。
当然、「#header .catch」に該当のプロパティが書かれていなければ、次の「#header h1」の値になります。
なお、数値が全く同じ場合(上記の「.head h1」と「div .catch」等)はCSSファイル内において下に書かれたものが適応されるようになっています。
この辺りは擬似セレクタ(a:hover、a:visited等)を書くときに順番を気にしなければならないのと同じ仕組ですね。
今までは、最終手段としてインライン表記をよく利用していましたが、これからは子孫セレクタに親を追加してあげるというのも、書いたCSSが適応されない時の対策として有効だなと感じました。
なお、「!importantルール」を使って優先順位を操作するという方法もあります。
これに関してはまたいずれ。
アドセンス広告メイン
関連記事
-
-
Web(ウェブ)でモリサワフォントが使える日がくる
1年以上前の記事です。内容が古い可能性があります。ちょっと前の記事だが、モリサワ …
-
-
WordPress3.4にアップデートしたらカスタムフィールドで入力した項目が表示されなくなった
1年以上前の記事です。内容が古い可能性があります。つい先日、WordPress( …
-
-
ブログ移転!?
1年以上前の記事です。内容が古い可能性があります。突然ですが、ブログを移転しまし …
-
-
レストランで料理の写真を撮ってブログにアップすると違法?
1年以上前の記事です。内容が古い可能性があります。などというドキッとするようなタ …
-
-
プロバイダ(接続サービス・ホスティングサービス)
1年以上前の記事です。内容が古い可能性があります。大概どこのお客さんでもインター …
-
-
営業手当てがほしいっす。
1年以上前の記事です。内容が古い可能性があります。最近、足で稼ぐ営業ではほとんど …
-
-
なんでもかんでも
1年以上前の記事です。内容が古い可能性があります。ホームページを基本的になんでも …
-
-
今、やっている仕事
1年以上前の記事です。内容が古い可能性があります。ばれたらやばいのであまり大きな …
-
-
Yahoo!検索 サイトエクスプローラー日本版登場!!
1年以上前の記事です。内容が古い可能性があります。ついにYahoo!のサイトエク …
-
-
ローカル変数、プライベート変数、レキシカルスコープ変数【perl】
1年以上前の記事です。内容が古い可能性があります。perlのmy宣言についてさら …