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ルール」を使って優先順位を操作するという方法もあります。
これに関してはまたいずれ。
アドセンス広告メイン
関連記事
-
-
何を売るかが問題
1年以上前の記事です。内容が古い可能性があります。いまどき、Webの知識だけでフ …
-
-
FlashのActionScriptで使われる「e:Event」って表記は何?
1年以上前の記事です。内容が古い可能性があります。訓練校の生徒さんから質問があっ …
-
-
ビデオをWebに公開したいらしい
1年以上前の記事です。内容が古い可能性があります。というお客の指示が。 で、
-
-
自宅サイト
1年以上前の記事です。内容が古い可能性があります。自宅サーバー移転にともない? …
-
-
ブログどこがいい?
1年以上前の記事です。内容が古い可能性があります。とある市議会議員のサイトを作る …
-
-
Yahoo!ジオプラスで送信フォームが動かない
1年以上前の記事です。内容が古い可能性があります。ずいぶん前にplot-fact …
-
-
ユビキタスの第一歩、スマホ(スマートフォン)やタブレットで家電が遠隔操作できる「heimcontrol.js」
1年以上前の記事です。内容が古い可能性があります。ユビキタスという言葉は最近あま …
-
-
昔の個人ホームページでやっていたこと
1年以上前の記事です。内容が古い可能性があります。僕がホームページを作り始めたの …
-
-
「tsudaる」って言葉知ってる?
1年以上前の記事です。内容が古い可能性があります。ツイッターをやっていると「ts …
-
-
「WordPress(ワードプレス)」のプラグインをインストールする方法3つ
1年以上前の記事です。内容が古い可能性があります。新しい豊洲のお仕事はCMS「W …