CODEWITHSUNDEEP
css
Mindaugo
Mindaugo

Reputation: 87

:last-child border affect submenu

In menu I apply last-child declaration to { border: none;}. After that my SUBmenu doesn't show borders even with declaration: {border-bottom: 1px solid black;} Any ideas why my second declaration doesn't work? FIDDLE

P.S I figured out that when I change ul.topmenu.... to ul.... everthing works perfect. But I still need to have ability to use my class name. 

/************QUESTION ZONE**************/

ul li a {
    border-bottom: 1px solid black;
}

ul.topmenu li:last-child a {
    border: none;
}

ul.secondsubmenu li a {
    border-bottom: 1px solid black;
}

/**********end question********/

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul {
    height: 2em;
    background: yellow;
}

li {
    float: left;
}

li a {
    display: block;
    line-height: 2em;   
    width: 6em;
    text-align: center;
}

ul.submenu, ul.secondsubmenu {
    height: auto;
}

ul.submenu li {
    float: none;
}

ul.secondsubmenu {
    background: yellow;
    color: white;
    height: auto;
    position: absolute;
    left: 12.6em;
    top: 6.9em;
    margin-left: 1px;
}
<nav>
    <ul class="topmenu">
        <li><a href="#">!</a>
        <li><a href="#">!!</a>
            <ul class="submenu">
                <li><a href="#">111</a>
                <li><a href="#">222</a>
                <li><a href="#">333</a>
                    <ul class="secondsubmenu">
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">222</a>
    </ul>
</nav>

Upvotes: 0

Views: 554

Answers (2)

Aram Mkrtchyan
Aram Mkrtchyan

Reputation: 2700

change this

ul.topmenu li:last-child a {
    border: none;
}

to this

ul.topmenu > li:last-child a {
    border: none;
}

when you add this symbol > it means only first children's

example

Upvotes: 2

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196197

Because the ul.topmenu li:last-child a is more specific, and all the a tags in the submenu (which belongs to the last li) are matched by this rule

change your second rule to 

ul.topmenu .secondsubmenu li a {
    border-bottom: 1px solid black;
}

Put the two rules in http://specificity.keegan.st/ to understand their specificity.

Upvotes: 1

Related Questions