Question

I am setting the style of list items like so:

ul.list li {
    background: #FFFFFF;
    padding: 0 5px 0 5px;
    height: 20px;
}

ul.list li:hover {
    background: #F7F7F7;
}

but I want to define a special list item for the title of the list only it inherits the previously defined style too. I know I could just give the above styling a class but that feels cumbersome. Do I have to manually “undo” everything just for the special list item or give the above styling a class? or is there a better way to do it? Maybe I shouldn’t be using a list item for the title?

ul.list li.header {
    font-size: 16px;
    font-weight: bold;
}

Answer 1

If the title of the list must be inside the list, I’d probably just (as you mentioned) “manually undo” them:

ul.list li.header {
    font-size: 16px;
    font-weight: bold;

    background: transparent;
    padding: 0;
    height: auto;
}

It’s not so bad.

---

If you only need to support modern browsers, you could do this:

.list li:not(:first-child) {
    background: #FFFFFF;
    padding: 0 5px 0 5px;
    height: 20px;
}
.list li:first-child {
    font-size: 16px;
    font-weight: bold;
}

.list li:hover {
    background: #F7F7F7;
}

This eliminates the need for any classes (though you could replace :first-child with .header if you do want to keep that class).