Just getting into css3, can someone explain this?

HTML & CSS
1

I am seeing this quite a bit,


.main > li {}
and
.menu-main > li > .dropdown {}

What is the purpose of the >

What I did in the past was just,


.main  li {}
and
.menu-main  li  .dropdown {}

They both seen to work the same so it’s just a little confusion on my part.
Thanks

2

That is a child selector which has been introduced in CSS2 (not CSS3).

The difference between the two is that in your first examples li matches all immediate children of .main whereas in the second example li matches all descendant selectors of .main, they don’t have to be immediate children.

3

Thanks for the answer. I was playing with it and came up with a great CSS menu. Very handy.