When multiple conflicting CSS rules target the same element, browsers use a set of guidelines to prioritize one over the other. Specificity plays a crucial role in assisting browsers to identify the most relevant property value for an element. It is the mechanism that determines which style declaration takes precedence in styling an element.
Before going in deep about specificity, let's discuss some points about it:
- The CSS specificity is important only when various selectors are affecting the same element. In this case, the browser needs a way to identify the style to be applied to the matching element, and CSS specificity is the way of doing it.
- When two or more selectors have equal specificity value, then the latest one considers.
- Universal selectors (*) and the inherited values have lower specificity, i.e., 0 specificity.
- The style property has a greater specificity value compare to the selectors (except the !important in the stylesheet selector).
- The !important alter the selector specificity. When two selectors have equal specificity, then the selector having !important
Specificity hierarchy
Each selector occupies a specific position within the hierarchy. The selector's specificity level is primarily determined by four distinct categories:
Inline styles are applied directly to the specific element requiring styling. For instance, <p style="color: red;">. These styles take precedence over other styling methods.
IDs: They serve as distinctive markers for the elements within a webpage and hold the second most significant level of importance. For instance, #para.
Classes, characteristics, and pseudo-classes: This encompasses classes, attributes, and pseudo-classes (such as :focus, :hover, etc.).
HTML elements and pseudo-elements consist of element names such as div and h1, as well as pseudo-elements like :after and :before. These elements and pseudo-elements are assigned the least priority in the styling hierarchy.
Specificity rules
The weight of specificity is assigned to CSS declarations based on the number of each selector type in the matching selector. Now, let's delve into how specificity is calculated.
The guidelines on specificity are outlined below, accompanied by an illustration.
T he specificity of ID selectors is higher than attribute selectors
Let us try to understand it with an example.
Example
In this instance, we will employ the id selector in conjunction with the background-color attribute.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
font-size: 30px;
color: blue;
background-color: red;
}
#div1 {
background-color: red;
}
div#div1 /*Higher specificity*/
{
background-color: yellow;
}
div[id=div1] {
background-color: blue;
}
</style>
</head>
<body>
<div id="div1"> Welcome to the C# Tutorial </div>
</body>
</html>
In equal specificity, the latest rule will count
In an external style sheet, when a rule is repeated, the most recent or final rule will take precedence and be applied.
Example
In this instance, the precision of element naming remains consistent. Here, the most recently specified element name will take precedence.
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-size: 30px;
text-align: center;
}
div
{
background-color: yellow;
color: red;
}
div
{
background-color: red;
color: yellow;
}
</style>
</head>
<body>
<h2> Example of equal specificity </h2>
<div> Welcome to the C# Tutorial </div>
</body>
</html>
The specificity of class selector is greater than the element selectors
A class selector such as .nav or .high is more targeted compared to element selectors like div, h1, or p.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.intro {
background-color: blue;
text-align: center;
color: yellow;
font-size :40px;
}
div {
background-color: red;
text-align: right;
color: blue;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<div class="intro">Welcome to the C# Tutorial</div>
</body>
</html>