Say I have the following:
tr {
background: #fff;
}
tr.even {
background: #eee
}
tr.highlight {
background: #fec;
}
Is it possible to specify a 4th background (#fea) instead of having highlight simply overwrite even?
<tr class="even highlight">
<!-- ... -->
</tr>
Once CSS3 is supported, nth-child might work. But, anything available in the meantime?
tr { ... }
tr:nth-child(even) { ... }
tr.highlight { ... }
tr.highlight:nth-child(even) { ... }
You can do this:
tr.even.highlight { ... }
Not known by IE6 though.
The key to assigning multiple classes is to make sure your CSS degrades gracefully across all browsers. In this case this would be a good solution:
tr.even.highlight { background:#fea }
In modern browsers that recognize this, you'll get that 4th color and it will be applied to:
<tr class='even highlight'>
...
</tr>
I think this even works in IE6.
IE6 does allow combined classes, but it does not prioritise by specificity. What I mean by this is if you try to apply the same style attribute in more than one class, it will be applied to element by the order in which the classes are listed in the stylesheet, not by heirearchy of the applied classes.
for example, in this case the text will appear as expected - i.e. paragraph 2 is in blue text:
<html>
<head>
<style type="text/css">
.style1 {color:red}
.style1.selected {color:blue}
</style>
</head>
<body>
<p class="style1">paragraph 1</p>
<p class="style1 selected">paragraph 2</p>
</body>
</html>
however, if the order of the classes is swapped around, as below, both paragraph 1 and 2 are in red text:
<html>
<head>
<style type="text/css">
.style1.selected {color:blue}
.style1 {color:red}
</style>
</head>
<body>
<p class="style1">paragraph 1</p>
<p class="style1 selected">paragraph 2</p>
</body>
</html>
so the combined class is applied, but so is the original simple class, meaning that the last class that the element matches is the one which styles it, if the classes are applying the same attributes.
So, you can get your css classes to behave how you expect by ordering them. But this may not work in all cases depending on how you want the classes to be applied. The only surefire way to remedy this in IE6 is to use javascript to add and remove css classes on particular events, which is a bit clunky.