When more than one set of CSS rules applies to the same element, the browser will have to decide which specific set will be applied to the element. The rules the browser follows are collectively called Specificity
Specificity Rules include:
- Inline CSS: It has the highest specificity and will override all other selectors, including external stylesheets and internal CSS.
- Internal CSS: Internal stylesheets (defined within the
<style> tags in the HTML document) have a higher specificity than external stylesheets. Therefore, internal CSS will override rules defined in an external stylesheet.
- External CSS: Styles defined in an external stylesheet (linked via the
<link> tag in the HTML document) have the lowest specificity. If there are conflicting rules between external stylesheets and internal or inline styles, the internal or inline styles will take precedence.
Example:
html
<html>
<head>
<link rel="stylesheet" type="text/css" href="external.css">
<style type="text/css">
h1 {
background-color: red;
color: white;
}
h2 {
color: blue;
}
</style>
</head>
<body>
<h1>
Internal CSS overrides external CSS
</h1>
<h2 style="color: green;">
Inline CSS overrides internal CSS
</h2>
</body>
</html>
|
“external.css” of Example-1:
CSS
h1{
background-color: lightgreen;
}
h2{
color: pink;
}
|
Output:
Example Output
Specificity Hierarchy :Every element selector has a position in the Hierarchy.
- Inline style: Inline style has highest priority.
- Identifiers(ID): ID have the second highest priority.
- Classes, pseudo-classes and attributes: Classes, pseudo-classes and attributes are come next.
- Elements and pseudo-elements: Elements and pseudo-elements have lowest priority.
Example-2:
html
<html>
<head>
<style type="text/css">
h1 {
background-color: red;
color: white;
}
#second {
background-color: black;
color: white;
}
.third {
background-color: pink;
color: blue;
}
#second1 {
color: blue;
}
.third1 {
color: red;
}
</style>
</head>
<body>
<h1 id="second" class="third">
ID has highest priority.
</h1>
<h1>
Element selectors has lowest priority.
</h1>
<h1 class="third">
Classes have higher priority than element selectors.
</h1>
<h2 style="color: green;" id="second1" class="third1">
Inline CSS has highest priority. </h2>
</body>
</html>
|
Output:
Specificity Hierarchy
Note:
- When two or more selectors have equal specificity, the last(latest) one counts.
- Universal selectors like body and inherited selectors have least specificity.
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 :
26 Jul, 2023
Like Article
Save Article