新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

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

   

  • このエントリーをはてなブックマークに追加

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

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

スポンサーリンク
 

これは、各セレクタを数字に置き換えると分かりやすいです。
各セレクタの数値は以下のようになります。

セレクタ 数値
インラインによる表記
(style=”color:red;”)
1000
IDによる表記
(例:#wrapper)
100
classによる表記
(例:.kakomi)
10
各タグに対する表記
(例:h1)
1

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

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

<div id="header" class="head">
<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
つまり、優先順位順に並べると

  1. #header .catch=100+10=110
  2. #header h1=100+1=101
  3. .head .catch=10+10=20
  4. .head h1=10+1=11
  5. div .catch=1+10=11 
  6. .catch=10
  7. div h1=1+1=2
  8. h1=1

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

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

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

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

 - Webデザイン, プログラミング

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

no image
Win版IEにおけるCSSのバグ

1年以上前の記事です。内容が古い可能性があります。最近では当たり前のように使われ …

ブラウザでオンラインゲーム。HTML5+JavaScriptで書かれたRPG

1年以上前の記事です。内容が古い可能性があります。ついにブラウザでRPG(ロール …

「BLOG of the year 2009」発表!【今週のトピック】

1年以上前の記事です。内容が古い可能性があります。ブログにもいろいろな賞があるん …

最もシンプルなオリジナルのリセットCSSを考えてみた【Webデザイン】

1年以上前の記事です。内容が古い可能性があります。そろそろHTML5が正式に勧告 …

WordPress(ワードプレス)で半角スペース付きのタグが使えるようになっていた

1年以上前の記事です。内容が古い可能性があります。これ、ちょっと嬉しいです。 い …

no image
検索ワード順位アゲアゲ大作戦 #3 リンクファーム検索大作戦

1年以上前の記事です。内容が古い可能性があります。夏休みに入りましたが引き続き頑 …

no image
noscriptタグによるSEOスパム

1年以上前の記事です。内容が古い可能性があります。BMWがgoogleからインデ …

Web制作会社はいずれなくなる? アメリカにWeb制作会社がない5つの理由

1年以上前の記事です。内容が古い可能性があります。アメリカにはWeb制作会社がな …

no image
携帯SEO

1年以上前の記事です。内容が古い可能性があります。携帯サイトの依頼が来た。 しか …

no image
年末

1年以上前の記事です。内容が古い可能性があります。年末が近くなり忙しくなりつつあ …