Excluding an ID from a global styling - css

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 you're at liberty to use advanced CSS3 selectors, you can use the :not() selector:
ul.list li:not(.header) {
background: #FFFFFF;
padding: 0 5px 0 5px;
height: 20px;
}
Otherwise, you'll just have to manually override them.

Answer 2

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).