How to select multiple classes in CSS|SASS example

It is a short tutorial about how to select multiple classes of HTML elements with CSS.

We can select use class selector or id selectors, But sometimes, we want to force to use class selector, example explains how to select multiple classes in CSS/HTML.

Let’s have a div class with multiple CSS class names.

The div tag has multiple class names separated by space as given in the below example.

<div class="container left">
This is Left container
</div>
<div class="container right content">
This is Right container
</div>

Suppose if you want to update the color of this right div to red and bold, then we have to select the right div from DOM using a CSS selector.

CSS example to select three classes

This div is selected if div contains class=“container” and class=“right” and class=“content”

CSS selectors select with ., so multiple classes are added side by side without space

CSS code:

.container.right.content{
    color:blue;
    font-weight:700
}

CSS code to select two classes

code:

.container.left{
    color:blue;
    font-weight:700
}

Let’s see an example with multiple selectors with class and id

To select div with id selector, We have to use # symbol

<div id="first">
<span class="block">first span<span>
<span class="block second">second span<span>
</div>

and To select the second span using id

#first .block.second{
    font-weight:700;

}
#first .block{
    font-size:14px;

}

SASS/SCSS code to select multiple select classes in the same item

In SCSS, parent selector & symbol is used. This & will be resolved side by side after compilation for CSS.

.container{
    &.right{
        &.content{
             color:blue;
             font-weight:700
        }
    }
}

Sass code to multiple id and class selectors for the above HTML code

#first{
    & .block{
            font-size:14px;
        &.second{
            font-weight:700;

        }
    }
}

Browser support

This syntax supports the latest browsers including the IE7 version also.