CSS Specificity
CSS Specificity: If one or more conflicting rules of CSS express a similar element, a browser will pursue a few rules to examine the specific one. Specificity can be specified in a form in which it helps several browsers to determine which value of the property is most convenient for an element. Also, it specifies which declaration of style is used to the element.
Before starting to discuss the specificity, let’s understand some key points, which are listed below:
- When multiple selectors are stirring any same element, only CSS specificity plays an important role. When any browser requires determining a style to use to any matching element, the CSS specificity comes and does it.
- When more than two selectors have the same value of the specificity, a current one is considered.
- An inherited value and the universal selectors (*) have a lower (0) specificity.
- The style property in CSS adds a higher specificity as compared to any selector, excluding the !important CSS property inside the selector of style-sheet.
- The !important CSS property changes the specificity of the selectors. If two or more selectors have the same specificity, it includes !important.
Specificity Hierarchy
All the selectors contain a place inside the hierarchy of specificity. Here are four types in which we are defining the selector’s levels of specificity.
Inline styles: This hierarchy type can be directly fixed to an element that is to be designed. Example: <p style= “color: blue;”>. It will have a greater priority.
IDs: It is a special identifier for a lot of elements of the page that contains the priority as second-greater. Example: #para.
Classes, pseudo-classes, and attributes: It adds classes, pseudo-classes, and attributes (like :hover, :focus, etc.).
Pseudo-elements and elements: It adds the pseudo-elements (like :before and :after) and the element’s name (h1, div). They have the least priority.
Specificity Rules
The CSS specificity can be defined as a weight, which can be used for any declaration of CSS. Also, it is identified by a number of each selector type inside any matching selector.
The rules of specificity are mentioned below with the example.
- The ID selector’s specificity is greater than the attribute selectors
Let’s take an example to define it.
Example:
In the example, we are using an id selector along with the CSS property background-color.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
text-align: center;
font-size: 30px;
color: white;
background-color: lime;
}
#div1
{
background-color: lime;
}
div#div1 /*Higher specificity*/
{
background-color: green;
}
div[id=div1]
{
background-color: red;
}
</style>
</head>
<body>
<div id="div1"> Welcome to this Page </div>
</body>
</html>
Output:
- In the equal specificity, the current rule will consider
When any similar rules are used twice, any current rule will be considered in an external style-sheet.
Example:
In the following example, the element name’s specificity is the same. Thus, the current specified name of the element will be used.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
text-align: center;
font-size: 30px;
}
div
{
background-color: lightblue;
color: blue;
}
div
{
background-color: lime;
color: green;
}
</style>
</head>
<body>
<h2> It is an example of The equal specificity </h2>
<div id="div1"> Welcome to this Page </div>
</body>
</html>
Output:
- The class selector specificity is higher than any element selector
Class selector (.high, .nav, etc.) has higher specificity when compared to any element selector ( such as p, h1, and div).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.intro
{
background-color: lightblue;
color: blue;
text-align: center;
font-size: 40px;
}
div
{
background-color: lime;
color: green;
text-align: right;
}
</style>
</head>
<body>
<h1> Hello World </h1>
<div class= "intro"> Welcome to this Page </div>
</body>
</html>
Output:
