Please help me to understand the following CSS code

Question

I'm no CSS guru, by any means. Typically, I'm able to meander my way through to understand what I'm looking at and then be able to mold it into what I want.

With that said, the following CSS lines have me scratching my head and I can't find anything to help me clarify it.

#testmenu li:hover > a{
    color: #fafafa;
}

I understand the reference to the hover of an li within the testmenu ID, but the "> a" has me lost. What is going on here?

related: http://stackoverflow.com/questions/4459821/css-selector-what-is-it — David, Dec 27 '13 at 18:56
Thanks. I try to avoid duplicates, but I missed this one. Many thanke — Lee, Dec 27 '13 at 19:00
Select `a` which is a direct descendant to `li` on hover of `li` which is further nested under any element having an `id` of `#testmenu` — Mr. Alien, Dec 27 '13 at 19:02

Kevin Bowersox · Accepted Answer · 2013-12-27T19:02:09.563

3

The > means the a element is a direct child of the li. The MDN documentation provides a good description of this selector.

Here is some HTML that demonstrates the selector:

<ul id="testmenu">
    <li><a href="#">Will be selected</a></li>
    <li><div><a href="#">Will not be selected</a></div></li>
</ul>

JS Fiddle: http://jsfiddle.net/7ePEr/

edited Dec 27 '13 at 19:02

answered Dec 27 '13 at 18:56

Kevin Bowersox

93,289
19
159
189

1

"direct" is superfluous, a DOM doesn't have any kind of children which aren't direct. – Quentin Dec 27 '13 at 18:58
@Quentin by `direct` I'm referring to non-grand children of an element. The MDN documentation seems to echo this verbiage, `The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first.` Although not necessary, I think direct helps emphasize the point. – Kevin Bowersox Dec 27 '13 at 19:04

score 3 · Answer 2 · answered Dec 27 '13 at 18:56

3

> is the child combinator. It requires that the element matched by the right hand side be a child of the element matched by the left hand side.

See also the Selectors specification.

answered Dec 27 '13 at 18:56

Quentin

914,110
126
1,211
1,335

score 1 · Answer 3 · answered Dec 27 '13 at 19:00

li:hover > a references an a element that is an immediate child of li

jsfiddle W3C Documentation

<ul id="testmenu">
    <li>
        <a href="#">I will change color on hover</a>
    </li>
    <li>
        <div>
            <a href="#">I will not</a>
        </div>
    </li>
</ul>

score 0 · Answer 4 · answered Dec 27 '13 at 18:57

0

Find id=testmenu. Get all descendants. Filter the descendants by the ones are <li>s and are being hovered over. Get all children. Filter children by the ones that are <a>s.

answered Dec 27 '13 at 18:57

bjb568

11,089
11
50
71

score 0 · Answer 5 · answered Dec 27 '13 at 18:59

0

The selector is selecting an a element that is a direct child (not many levels down, a direct descendant) of an li that is being hovered over that is a descendant of an element with id testmenu

answered Dec 27 '13 at 18:59

markasoftware

12,292
8
41
69

Please help me to understand the following CSS code

5 Answers5