Question

I have a slider that’s marked up like so:

<div class="slider wide">
//slider html in here
</div>

And another marked up like so:

<div class="slider narrow">
//slider html in here
</div>

Is it possible to reference each of these like this in my CSS file by in a way concatenating the class names:

.slider.wide { //css specific to the wide slider goes here }
.slider.narrow { //css specific to the wide slider goes here }

Answer 1

Yes, .slider.narrow is valid. It’s not exactly concatenating the class names, it’s making two different class selectors and applying them to the same element. So .narrow.slider is also valid and will match the same elements.

The problem with using multiple class selectors against a single element is that is doesn’t work in IE6. This browser will ignore all but the last class selector. So to support that browser you typically end up using something like class="slider wide-slider".