Question

I have a really basic list in HTML that looks like this:

<div id="navmenu">
    <ul>
    <li>photography</li>
    <li>&#149</li>
    <li>people</li>
    <li>places</li>
    <li>things</li>
    <li id="lastElement">about</li>
    </ul>
</div>

My CSS formatting looks like this:

div#navmenu li {
     display: inline;
     margin-right: 40px;
}

However, I want the last li element’s margin-right be 0px. So I did:

li#lastElement {
     margin-right: 0px;
}

When I check on Chrome’s dev tools, this last CSS specification is crossed out. I don’t understand why it’s overridden by the “div#nav menu li” property? Isn’t the last li element with its own id more specific?

Any help would be appreciated. Thanks in advance.

Answer 1

The one that is overriding it is more specific, it has two tag and an id selector, while your other only has a tag and id selector.

You could change it to div#navmenu li#lastElement or make the other selector less specific.