CSS multiple classes selector

CSS class selectors select those elements who have "class" attribute with the value being matched to the class selector. In this lesson, We'll learn

• What are class selectors?

• One class selector for multiple elements

• Multiple classes selector for one element

• Multiple classes for an HTML element

• How multiple classes affect the same properties of an element

What are class selectors?

Firstly we talk about class selectors. It consists of a full stop (.) followed by identifier name. This identifier selects the element which has class attribute with the identifier value.

<style>
.box{
 width:100%;
 height:100px;
 background:lightblue;
 border:1px solid red; 
}
</style>
Try </>

In the above example, box is the class name. It selects the elements that have class="box" as the attribute.

Class selector for multiple elements

There might be a class for multiple elements. In the following example, * means this class selects all of the elements and applies CSS properties.

<style>
*.textColor{
 color:rgba(0,255,0,1);	
}
</style>
Try </>

In the above example, .textColor class can select all of the elements.

<style>
p.textColor{
 color:rgba(20,20,20,1);	
}
</style>
Try </>

In the above example, .textColor class selector selects only <p> elements that have class="textColor" as attribute. The above given class can not select other elements even they have class="textColor" as attribute.

Multiple classes for an HTML element

More than one classes can be applied on one element. In the following example, there are two individual classes that are applying CSS properties to an HTML element.

<style>
.textColor{
 color:rgba(20,20,20,1);	
}
.designMe{
 background-color:lightblue;
 font-size:18px;
}
</style>
Try </>

Both of the above given classes can be applied on an element that have class="textColor designMe" as attribute. There mmight be more than one calsses for an element.

And we have seen in this section that how individual classes are applied on one HTML element. And now we'll see the effect of multiple classes selector for an HTML element.

Multiple classes selector for one element

In this section we'll see how a class selector with multiple classes affect an element. Two examples are given below. Only the first one is the exmple of "multiple classes selector".

Example1

There is no space between two classes.

<style>
.one.two{
 width:200px;
 height:200px;
 background-color:lightblue;
}
</style>
Try </>

In this example, the classes select only those elements that have class="one two" necessarily.

Example2

The following example is not the same as the above one. This example has been given to make the previous example more clear to understand. There is space between two classes.

<style>
.one .two{
 width:200px;
 height:200px;
 background-color:lightblue;
}
</style>
Try </>

In this case, the classes select only those elements that have class="two" and its parent element must have classs="one" attribute.

Classes affecting the same properties of an element

And now we see if multiple classes are affecting the same properties of an element, which one of them will dominate?

The answer is simple. The last class in the document tree will dominate and it does't matter whether you place the class name at the start of end in the "class" attribute.

<style>
.first{
width:100px;
height:200px;
background-color:lightgreen;
}

.second{
width:200px;
height:100px;
background-color:lightblue;
}
</style>
Try </>

In the above example, .second class will dominate in any case because it is placed at the end of the tree of classes.