css ">" what means rather

[lse123]

#main > ul > li { list-style:none; float:left; }

">" what means rather

#main ul a {

???


#main div {
padding:10px 10px 8px 10px;
*padding-top:3px;
*margin-top:-15px;
clear:left;
background:snow;
height: 300px ;
}

also what "*" mean?

[jscheuer1]

It's a child selector. Instead of the ul being anywhere within #main, it must be a direct descendant of #main like:


<div id="main">
<ul></ul>
</div>

Not a secondary or lower descendant like:


<div id="main">
<div><ul></div>
</div>

Often this is used to avoid styling nested elements of the same type. Like ul's within the ul or li's within the li.

The asterisk * is technically invalid so will negate (remove) the rule that follows it on the same line. It's bad form and should be done like so:


#main div {
padding:10px 10px 8px 10px;
/* padding-top:3px; */
/* margin-top:-15px; */
clear:left;
background:snow;
height: 300px ;
}

[traq]

John is correct that the * makes those rules "invalid" (so browsers ignore them), but there's another purpose behind doing it.

IE 7 and less do not ignore rules with a * in them.
This IE bug led to the "star hack (http://en.wikipedia.org/wiki/CSS_filter#Star_hack)" which can be used to make CSS rules that apply only to IE6/7.

It's still not a good thing, however, and I recommend against using it. If you need to target IE6/7, you should use conditional comments or javascript (for feature detection).