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 selectors or id selectors, But sometimes, we want to force to use class selectors, 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 the Left container
</div>
<div class="container right content">
This is Right container
</div>

Suppose 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 the 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 the 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.