The difference between...

[ChocoboBop]

I've been trying to study up on hovering css list navigations and I've been looking through several examples. On one of them I see:

	ul#mainMenu, ul  {
		padding:0;
		margin:0;
		list-style-type:none;
	}
	ul#mainMenu ul {
		margin-top:3px;
	}

What is the difference between the two styles? One has a , and the other doesn't, but they look the same to me. Couldn't the margin-top be added to the first one?

[Roy Sinclair]

That comma makes all the difference in the world, the first one with the comma means the following CSS rules applies to all UL tags (the more specific selector prior to the comma is effectively ignored) while the second one without the comma means that it only applies to UL tags that are embedded within a UL tag that has an ID value of mainMenu.

See: http://www.w3.org/TR/CSS2/selector.html

[gwendaal]

then is ot the same than

ul#mainMenu > ul {
margin-top:3px;
}

[Roy Sinclair]

Replacing the space with a greater than takes it from applying to ANY UL tag which is a descendant of the UL tag with an ID of mainMenu to applying to only any UL tag which is a direct child. Effectively that's a useless rule because you've got to have a LI under a UL so you'll not be able to have another UL as a child of a UL.

[gwendaal]

thanks Roy !

[Roy Sinclair]

I forgot to mention that a certain browser used by the vast majority of the users on the web right now doesn't honor the greater than selector anyway so there's another reason not to count on it's being usable right now.