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 :
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
31 Jan, 2020
Like Article
Save Article