Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to specify order of classes using CSS?
Cascading Style Sheets (CSS) is a powerful component of web development which enables the developers to determine the visual appearance of their websites. In CSS, classes are used as selectors which enables us to apply several specific styles to an element. You can also use multiple classes for a particular element.
However, when you apply multiple classes to an element, it is necessary to know how to specify the order of these classes in which they will be rendered to avoid discrepancies and unexpected results. In this article, we will discuss different methods to specify the order of classes in CSS and the importance of specificity and cascading rules which helps in determining the precedence.
What are Classes in CSS?
In CSS, a class is selector used to apply specific set of styles to HTML elements. They are powerful tools which enables us to group elements together and maintain uniformity across multiple elements on a webpage. It allows us to reuse CSS styles for many elements in case of large websites.
Using Multiple Classes for an Element
If you have defined set of classes in CSS, you can use combinations of them for a particular element in order to make it unique and attractive. However, you have to specify the order of the classes so that the compiler runs the code smoothly and provides the output according to your needs. This is done by cascading and specificity rules.
The order in which we define the classes in the CSS file is used to determine their precedence while applying multiple classes to an element. This is because CSS is cascading which means the compiler reads it from top to bottom. So, the one which is mentioned last in the CSS code gets the priority.
Example: CSS Cascading Order
Suppose you have defined two classes in a CSS file
<!DOCTYPE html>
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Classes</h1>
<div class="class1">Here, we have applied class1 to the div element.</div>
<div class="class2">Here, we have applied class2 to the div element.</div>
<div class="class1 class2">This is an example. Here, we will apply both classes to the div element.</div>
</body>
</html>
The first div displays red text with smaller font size (class1 styles). The second div displays blue text with larger font size (class2 styles). The third div displays blue text with larger font size (class2 takes precedence) but retains the text-align: center from class1.
Since .class2 is declared after .class1 in the CSS code, class2 gets the precedence. Hence, when we apply both class1 and class2 to the div element, the div element is mostly styled according to the class2.
However, properties which are not mentioned in class2 but are there in class1 will be applied to the div element. Like the text-align: center is mentioned in class1 but not in class2. The last div element is centrally aligned because unique properties from class1 are preserved.
Order of Classes in HTML
The order of classes written in HTML doesn't determine the priority. The CSS declaration order is what matters
<!DOCTYPE html>
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Classes</h1>
<div class="class1 class2">First class1, then class2</div>
<div class="class2 class1">First class2, then class1</div>
</body>
</html>
Both div elements appear identical with blue text and larger font size (class2 styles take precedence), regardless of the order in the HTML class attribute.
As you can see there is no change in the result. The styles will be applied only according to the order of classes which is mentioned in the CSS.
Using the !important Rule
In CSS, the !important rule enables the developers to override the cascading order of styles and ensures that the desired specific styles gets the highest priority.
Syntax
selector {
property: value !important;
}
Example: Using !important Rule
In the following example, since .b comes after .a in CSS, class b styles should take precedence. However, the color property from class a will override because of !important
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 10px;
padding: 2px;
}
.a {
color: red !important;
letter-spacing: 1px;
text-shadow: 2px 2px 2px grey;
font-size: 16px;
font-family: Calibri;
}
.b {
color: blue;
letter-spacing: 1px;
font-size: 20px;
font-family: Georgia;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>!Important Rule</h1>
<div class="a">Here, we have applied only class "a" to the div element.</div>
<div class="b">Here, we have applied only class "b" to the div element.</div>
<div class="a b">Here, we have applied both the classes to the div element.</div>
</body>
</html>
The first div shows red text with smaller font and text shadow (class a styles). The second div shows blue text with larger font (class b styles). The third div shows red text (!important overrides) with larger font and Georgia font family (class b wins for other properties).
Conclusion
In CSS, class precedence is determined by the order of declaration in the stylesheet, not the order in HTML. The last declared class takes priority for conflicting properties. Use the !important rule sparingly to override the natural cascading order when absolutely necessary.
1K+ Views
