IEが子セレクタに対応していないというのを利用したテクニックです。
一番最初に覚えるべきハックとも言えるほど、便利なハック。
やり方
div#g_navi ul { margin-left:-5px; width:600px; } /*IE以外に...*/ div#g_navi > ul { margin-left:0; }
↑こんな感じで、IE用の値を書いた後に、IE以外用の値を子セレクタを使って書きます。
上記のサンプルでは、「floatで左右どちらかに寄せているボックスに、marginの値を指定するとIE5.x/IE6の環境下で、指定値の2倍程度のmarginが設定される。」バグ対策として使ってます。
アンダースコアハックと逆ですが、アンダースコアハックはCSSの書式的にはダメなので、W3C CSS ValidatorでErrorになります。
子セレクタは、IE6が対応してないっていうだけで、悪い事なんてない正しい書き方ですので、ボクはじゃんじゃん使って良いと思います。
(使わずに回避できるならその方が勿論良いですけど。)
確か、MicrosoftのIE開発チームが「悪いハック」として書いていたと記憶しておりますが、IE6が対応してないだけで時期IE7が正常にCSSを解釈してくれるのならば、カスケード処理の規則通り上書き処理されるので何の問題も無いハズです。
IE6はIE7が正式リリースされてもスグに切り替わる訳も無いので、当分は必要になってくると思います。
個人的には、この子セレクタを利用したハックだけ覚えておけば困った時大抵対処出来ると思ってます。
子セレクタについて
子セレクタは、セレクタとセレクタを右向き不等号( > )で区切って指定させる方法で、親要素の直接の子要素(孫要素以下を含まない)をターゲットにスタイルが適用されます。
勿論、子孫セレクタなど他のセレクタと組み合わせて使う事も出来ます。
CSS2から導入されたセレクタなので、IEなど(IE7は別)対応の遅れているブラウザは理解出来ません。
その恩恵(?)で、子セレクタによるハックが可能となる訳ですが。。。
トコロで、 < と > ってどっちが左でどっちが右ですか?
ぐぐるとどっちも出てきて、どっちも信憑性が有りそうなサイトで逆になってる気がするんですが...
誰か教えて!