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 class="container right content">
This is Right container
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 to select two classes
Let ‘s see an example with multiple selectors with class and id
To select div with id selector, We have to use # symbol
<span class="block">first span<span>
<span class="block second">second span<span>
and To select second span using id
In SCSS, parent selector & symbol is used. This & will be resolved side by side after compilation for CSS.
Sass code to multiple id and class selectors for above html code
This syntax support in latest browsers including IE7 version also