What does ">" mean in CSS?

Question

Possible Duplicate:
What does “>” mean in CSS rules?

What does the > symbol mean in CSS? I noticed it in my Wordpress blog theme and want to know what it is doing.

#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
    background: #efefef;
}
#access li:hover > a,
#access a:focus {
    background: #f9f9f9; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    color: #373737;
}
#access ul li:hover > ul {
    display: block;
}

score 44 · Accepted Answer · edited Feb 28 '12 at 18:45

44

it means that only "first nested" elements will be targeted ("child" elements), for example

   <div id="a">
       <div id="b">
         <div id="c">
       </div>
      </div>
    </div>

if you write

#a div{
 background: red;
}

then both #b and #c will be red, but if you use > like

#a > div{
 background: red;
}

then only #b will be red, #c will not.

edited Feb 28 '12 at 18:45

BoltClock

700,868
160
1,392
1,356

answered Feb 28 '12 at 18:21

mkk

7,583
7
46
62

1

I think your answer would be even more helpful if you added another `div` with `id=d` under the `id=a` `div` to *visually* show all `child` elements will be selected. :) – Govind Rai Oct 03 '16 at 23:17

score 12 · Answer 2 · edited May 23 '17 at 11:47

12

That is a child selector (also called a child combinator). You can find out more about selectors on the website of the World Wide Web Consortium (W3C), where you can read the CSS2 entry on the child selector or you can skip straight to the CSS3 entry on the child selector.

Also, here's a great quote from another SO question about CSS Child vs Descendant selectors:

Just think of what the words "child" and "descendant" mean in English:

My daughter is both my child and my descendant

My granddaughter is not my child, but she is my descendant.

edited May 23 '17 at 11:47

Community

1
1

answered Feb 28 '12 at 18:19

David Brainer

6,223
3
18
16

The CSS2 selector specification has been superseded by the CSS3 spec as it's now a Recommendation (also with a pretty cool URL): http://www.w3.org/TR/selectors – BoltClock Feb 28 '12 at 18:44

score 3 · Answer 3 · edited Feb 28 '12 at 18:23

3

li > a matches any a element that is a child of li. See W3C CSS page for any selectors.

edited Feb 28 '12 at 18:23

Chuck Norris

15,207
15
92
123

answered Feb 28 '12 at 18:21

Jay

2,141
6
26
37

What does ">" mean in CSS?

3 Answers3

Linked