CODEWITHSUNDEEP
htmlcss
jack blank
jack blank

Reputation: 5195

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

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>

Upvotes: 0

Views: 87

Answers (1)

Leo
Leo

Reputation: 14850

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

Upvotes: 3

Related Questions