Is this CSS reference correct and supported syntax: .slider.wide {}

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

No, you make three classes .slider, where you put common slider css, and .narrow where you put narrow slider specific css, and .wide where you put wide slider specific css.

.slider { //css common among all sliders goes here }
.wide { //css specific to the wide slider goes here }
.narrow { //css specific to the narrow slider goes here }

Answer 2

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