why doesn't this ">" direct descendent css selector work

Question

Im wondering why this ">" selector doesn't work in this case below

    nav > ul > li > ul > li > a{
        color: red;
    }

but it does work in this case

    nav > ul > li > ul > li > a.item{
        color: red;
    }

The .a is the direct descendant of the li why do i have to specify the class name. shouldn't it get the child of the li? which is the .a

I just realized that it works if I just give you the above information but if I put in the rest of the css that I have before the above code, just putting the .a doesn't work. why is that happening

rest of css:

    html{
        height: 100%;
    }
    body{
        background-image: repeating-linear-gradient(315deg, #ddd, #ddd 40px, #aaa 40px, #aaa 80px);
        padding: 20px;
        height: 100%;
    }
    nav{
        margin: 0 auto;
        width: 960px;
        font-family: sans-serif;
        font-size: 0.6em;
        background-color: rgb(86,86,86);
        background-image: linear-gradient(bottom, rgb(75,75,75), rgb(86,86,86));
        border-radius: 4px;
        box-shadow : 0 0 10px rgba(0,0,0,0.1), 0 -1.5em 0 rgba(0,0,0,0.1) inset, 0 1px 1px 1px rgba(0,0,0,0.1) inset;
    }
    nav > ul{
        padding: 0 10px;
    }

    nav > ul > li{
        display: inline-block;
        vertical-align: top;
        line-height: 3em;
        width: 100px;
        z-index: 2;
        position: relative;
        border-left: 1px solid #313131;
        box-shadow: 1px 0 1px rgba(255, 255, 255, 0.1) inset, -1px 0 1px rgba(255, 255, 255, 0.1) inset;
    }
    nav > ul > li:nth-last-child(2){
        border-right: 1px solid #313131;
    }

    nav > ul > li > ul{
        position: absolute;
        left: -1px;
        top: 3em;
        clip: rect(0,0,0,0);
        opacity: 0;
    }

    nav .item{
        color: #fff;
        text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
        text-decoration: none;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        padding-left: 10px;
        white-space: nowrap;
        display: block;
        cursor: pointer;
    }
    nav > ul > li > .item:hover + ul,
    nav > ul > li > ul:hover {
        clip: auto;
        opacity: 1;
    }
    nav > ul > li > ul{
        padding: 0.7em 0px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border-top: none;
        background-color: rgb(117,189,70);
        background-color: rgba(119,172,48, 0.8);
        background-image: linear-gradient(left, rgba(117, 189, 70, 1), rgba(117,189,70,0.0));
    }

html

<nav>
    <ul>
        <li data-section="about-me">
            <a href="#" class="item">About me</a>
            <ul>
                <li><a href="#" class="item">Early years</a></li>
                <li><a href="#" class="item">First works</a></li>
                <li><a href="#" class="item">Today and tomorrow</a></li>
                <li class="cursor"><a href="#" class="item">back</a></li>
            </ul>
        </li>

    </ul>
</nav>

This issue is somewhere related to `CSS Specificity`. you may learn more about on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity. — Kheema Pandey, Aug 28 '14 at 03:58
possible duplicate of [Points in CSS specificity](http://stackoverflow.com/questions/2809024/points-in-css-specificity) — , Aug 28 '14 at 04:21

Leo · Accepted Answer · 2014-08-28T04:15:09.903

3

What's happening is that css selectors that specify a class name takes precedence over the descendant selectors. When you specify this selector...

 nav > ul > li > ul > li > a

it gets overridden by this one...

nav .item

and that's why the menu item shows its text in white, because class selectors take precedence over descendant selectors. However, when you specify this selector below the nav .item declaration...

nav > ul > li > ul > li > a.item

you are adding the class selector to the descendant which effectively overrides the previously specified nav .item selector

edited Aug 28 '14 at 04:15

answered Aug 28 '14 at 03:49

Leo

13,933
2
34
53

I disagree with the priority you are listing.... attribute is not in higher specificity than class... – Bhojendra Rauniyar Aug 28 '14 at 03:58
@C-linkNepal Based on the MDN docs, I think you are wrong...https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – Leo Aug 28 '14 at 04:00
@C-linkNepal and another one http://www.alternategateways.com/tutorials/css/css-101/part-four-the-css-order-of-precedence – Leo Aug 28 '14 at 04:01
I'm still with my concept that MDN still doesn't providing correct information because type selector isn't higher than class selector. Check this demo : http://jsfiddle.net/c1z2t0sa/ – Bhojendra Rauniyar Aug 28 '14 at 04:04
@C-linkNepal I think `Attribute Class selector` have `higher specificity` than simple `class selector` have a look at this example. http://jsbin.com/tidokezedinu/1/edit correct me if I am wrong.. – Kheema Pandey Aug 28 '14 at 04:09
@C-linkNepal you're probably right...I found those docs a bit misleading sometimes and specificity can get quite complex for a single answer...I guess I'm better off removing that specificity list – Leo Aug 28 '14 at 04:12
@KheemaPandey that's not exactly what's happening in your example. Swap the order of the declarations and you'll see what happens – Leo Aug 28 '14 at 04:14

why doesn't this ">" direct descendent css selector work

1 Answers1