間違いやすいCSSセレクタ

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

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

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

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

の２つが対象になる。

div.class > a

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

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

先ほどの例

<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セレクタ　1個　＝ 要素セレクタ10個分
IDセレクタ　1個　＝ 要素セレクタ256個分

くらいの強さがある。

つまり

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

が同じ強さらしい

2012-10-19：訂正。IDセレクタは要素セレクタ２５６個分だそうです

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

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

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

それマグで！