Specificity issue in CSS

Question

So I have a list of items inside a div with the class book-select and one of the li's in my unordered list has the class selected. According to the CSS rules I've defined, the li's in the div has the background color skyblue and the one li with the class selected would be steelblue.

The problem is that the book-select class is overwriting the selected class, which I don't understand. Wouldn't the div class be less specific than the li with the class selected? The li is in a ul which is in the div.

Here's the relevant CSS and HTML:

.book-select li {
    font-size: 0.75em;
    text-align: center;
    list-style: none;
    background: skyblue;
    width: 25%;
    margin: auto;
}

.selected {
    background: steelblue;
}

<div class="book-select">
    <h2>Pick a book:</h2>
    <ul>
        <li>Set A Volume 1, Course Foundation</li>
        <li>Set A Volume 2, Expeditionary Airman</li>
        <li>Set A Volume 3, Professional Airman</li>
        <li>Set B Volume 1, Supervisory Communicator</li>
        <li>Set B Volume 2, Supervisor of Airmen</li>
        <li class="selected">All</li>
    </ul>
</div>

This is part of a quiz and the idea is that the user clicks on a book and jQuery will change the class of the selected item to whatever is clicked on, with the last li with the text "All" being the default selected book. I could use a different jQuery method to change the background color, but the fact that CSS is giving me this specificity error is bothering me.

I know .book-select li is overwriting .select because the console is showing the background: steelblue; as crossed off.

Shouldn't it be the other way around? Isn't .selected the more specific class, as it only contains one element, which is itself?

Answer 1

Use this selector to increase the specifity of that CSS rule:

.book-select li.selected {
   background: steelblue;
}

About "specifity": Simply said, one class plus one tag (.book-select li) has more "weight" concerning specifity than just one class (.selected), so a rule with one class plus one tag will overwritea rule with just one class. And the selector shown above will overrule that again, since it consists of two classes and one tag.