CSSのデクレッシェンド（＞）とアスタリスク(＊)

質問

あるスタイルシートに、以下のような記述があったのですが、
この場合の「＞」と「＊」はどういう役割りを果たすのでしょうか？

#hoge ul li .fuga > a{
color : red;
}
* html #hoge ul li .fuga a{
color : green;
}

いろんなサイトを見てみたのですが、理解できませんでした。
ご存じの方、教えてください。

よろしくお願いいたします。

回答No.1

naokita · ベストアンサー

同じ部分をブラウザにあわせて分岐させています。
つまり、IE6以下か否か。それぞれのブラウザで色を変えています。

#hoge ul li .fuga > a{
li .fuga の中の a　という子供セレクタなので、IE6以下では認識出来無い。

* html #hoge ul li .fuga a{
↑スターハックでIE6以下しか認識出来無い。

どちらかが一方で可能なので、どちらか一方が蛇足かな。

「子供セレクタ」
「スターハック」
で詳しく検索してみましょう。

お礼

「子供セレクタ」、「スターハック」で検索して、ばっちり（？）理解できました！
ありがとうございます！

つまり

#hoge ul li .fuga > a{color : red;}
* html #hoge ul li .fuga a{color : green;}

の両方を記載することにより、
IE6以下のブラウザ環境にも配慮した親切なサイトを作ることができる、ということですよね。

回答No.2

mat-21

#hoge ul li .fuga > a{ color : red; }
「#hoge ul li .fuga」直下の「a」だけ。

* html #hoge ul li .fuga a{ color : green; }
この指定ですと「IE」と「Safari.1～2」のバグを逆手にとった指定方法。
つまりこの場合、IEとSafari.1～2だけが、* html #hoge ul li .fuga a{ color : green; } となる。

ちなみに、
#hoge ul li .fuga a{ color:red; *color : green; }
とするとIEだけ、greenになり、その他のブラウザは、redになる。

らしい。。
たしか,,,,,だったと思う。ごめんなさい、ちと自信がなくなってきた.....。
ウェブデザイナーだけど、ぜんぜん使わないので^_^;

お礼

回答ありがとうございました。
上記方法試してみましたが、どうもうまくいきませんでした。

スターハックが適用されるのが「Macの場合はIEすべて」になっていたので、Macの場合はそうなるのかもしれないですね。