CSS selectors for parent elements

Question

I'm currently reading Charles Wyke-Smith's book "Stylin' With CSS".

He has one section where there is nav.menu > ul {} AS WELL AS nav.menu ul {}.

What's the purpose of the > selector?

2nd google result: http://css-tricks.com/child-and-sibling-selectors/ — David, Apr 19 '13 at 05:20
possible duplicate of [CSS Selectors, > versus space](http://stackoverflow.com/questions/2636379/css-selectors-versus-space) — pickypg, Apr 19 '13 at 05:22

score 3 · Answer 1 · answered Apr 19 '13 at 05:19

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

Quick Explanation:

E > F Matches any F element that is a child of an element E.

More detail from the same source:

A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">".

The following rule sets the style of all P elements that are children of BODY:

body > P { line-height: 1.3 } The following example combines descendant selectors and child selectors:

div ol>li p It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the ">" combinator has been left out.

For information on selecting the first child of an element, please see the section on the :first-child pseudo-class below.

Where as the alternative matches any child in the chain rather than any descendant (e.g., child of a child would qualify without the `>`, but not with the `>`). — pickypg, Apr 19 '13 at 05:20

score 2 · Accepted Answer · answered Apr 19 '13 at 05:19

2

It selects immediate children, as opposed to descendants at any point in the hierarchy.

answered Apr 19 '13 at 05:19

David Hedlund

128,221
31
203
222

CSS selectors for parent elements

2 Answers2