それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

間違いやすいCSSセレクタ

パパっと書いていると間違いやすいCSSセレクタがあります。

自分なりよく間違うCSSについて。

  1. 子孫セレクタと親子セレクタ
  2. IDセレクタと要素(クラスセレクタ

は、上書き関係でよく間違うので整理しておく。

子孫セレクタと親子セレクタ

子孫セレクタとは
div.class a

です

親子セレクタとは
div.class > a

です

親子と子孫の違い
<div class="class" id="cd_1">
  <a href="foo" >foo</a>
  <div class="name"><a href="bar">bar</a></div>
 </div>
子孫セレクタで選択すると
div.class a
  • a[href=foo]
  • a[href=bar]

の2つが対象になる。

親子セレクタで選択すると
div.class > a
  • a[href=foo]

選択されるのは一つだけになる。

何処が間違いやすいかというと

手抜きCSSを渡されると、主なぬ所で上書きされていたり。思わぬスタイルが入ってくるので面倒くさい。
きっちり読んだつもりでも暴走を許すのが子孫セレクタ。出来れば親子を使いたい。

IDセレクタと要素セレクタ

先ほどの例

<div class="class" id="cd_1">
  <a href="foo" >foo</a>
  <div class="name"><a href="bar">bar</a></div>
 </div>
#cd_1 *  {     /*ルール1*/
  margin: 0px;
  padding: 0px;
}
div.class > a{ /*ルール2*/
  margin: 10px;
  display:block
}


とした場合、a 要素のmarginは 10pxにならない。

当たり前だが、 IDセレクタは全てに対して優先する。

IDセレクタは最優先

IDセレクタ 1個 = 要素セレクタ10個分
IDセレクタ 1個 = 要素セレクタ256個分

くらいの強さがある。

つまり

#cd_1 a {
}
div div div div div ..... div div div div a{
}

が同じ強さらしい

2012-10-19:訂正。IDセレクタは要素セレクタ256個分だそうです


よくデザイナーが、「後から書いたCSSなのに」なんて言ってる時は要注意です。


何処が間違いやすいかというと「上書きの優先関係。」です。

これをわかってないと面倒な事になるようで、 important 乱発という悲惨な結果が待ってます。

広告を非表示にする