How to specify the order of classes in CSS ?
Last Updated :
31 Jan, 2020
When there are rules conflicting to each other been applied to a given element, it gets pretty complicated to determine which rule will actually get applied.
The order in which the attributes are overwritten is determined by where they appear in the CSS, not by the order the classes are defined in the class attribute, i.e. the styling which is defined at the end of the CSS class will be the one to be applied.
Thus, if two declarations have the same weight, origin, and specificity, the latter specified wins.
Example 1: This example displays four labels with unique classes. When we see the labels having order ‘basic extra’ or ‘extra basic’, both follow the styling as .basic placed at the end of the styling order.
<html>
<head>
<style type="text/css">
.extra {
color: #00529B;
font-size:50px;
background-color: pink;
}
.basic {
color: #00529B;
font-size:30px;
background-color: #90ee90; /*light green*/
}
</style>
</head>
<body>
<label class="basic"/>Geeks</label>
<label class="extra"/>For</label>
<label class="basic extra"/>Geeks</label>
<br/>
<br/>
<label class="extra basic"/>Geeks For Geeks</label>
</body>
</html>
|
Output:
Example:
This example displays four labels with unique classes just as above but we have reversed the order in which we have defined the styles. When we see the labels having order ‘basic extra’ or ‘extra basic’, both follow the styling as .extra placed at the end of the styling order.
<html>
<head>
<style type="text/css">
.basic {
color: #00529B;
font-size:30px;
background-color: #90ee90; /*light green*/
}
.extra {
color: #00529B;
font-size:50px;
background-color: pink;
}
</style>
</head>
<body>
<label class="basic"/>Geeks</label>
<label class="extra"/>For</label>
<label class="basic extra"/>Geeks</label>
<br/>
<br/>
<label class="extra basic"/>Geeks For Geeks</label>
</body>
</html>
|
Output :
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...