How to select multiple classes in CSS|SASS example

This is an short tutorials about how to select multiple classes html elements with CSS.

We can select use class selector or id selectors, But sometimes, we want to force to use class selector, This example explains about 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 separate by space as given in 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 this right div to red and bold, then we have to select right div from DOM using 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 are selected 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 second span using id

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

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

}

SASS/SCSS code to select multiple select classes in 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 above html code

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

        }
    }
}

Browser support

This syntax support in latest browsers including IE7 version also