According to Wikipedia, cascading style sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. In other words, CSS is responsible for the styling of the webpage. CSS is one of the basic building blocks of the web alongside HTML and JavaScript.
Specificity in CSS refers to a set of rules specifying which style declarations get applied to an element when there are contradictory or overlapping styles. Think of specificity as the order of importance with which styles are applied to elements. Cascade in the context of CSS refers to the algorithm for solving conflicts when multiple CSS rules apply to an element. One of the major points of consideration during cascading is specificity.
Consider the code snippet below. In the HTML, a section element was created with a class and id of box. In the CSS file, that same section element was targeted in three different ways, it was targeted with the tag name section, its class name box, and the id name box. Now the bone of contention here is, which of these styles gets applied to the section?
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Specificity</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section id="box" class="box">
</section>
</body>
</html>
/* styles.css */
section{
background-color: red;
width: 40px;
height: 40px;
}
.box{
background-color: blue;
width: 40px;
height: 40px;
}
#box{
background-color: yellow;
width: 40px;
height: 40px;
}
The answer to the question above depends on specificity. How do we calculate the specificity of each CSS rule applied to the element? Here’s the thing, the order of specificity in CSS is inline CSS, !important > id > classes> HTML tags. There is an arithmetic trick to it, take inline CSS and the !important keyword as 1000 points, id as 100 points, classes as 10 points, and tags as 1 point.
!important, inline style- 1000
ids- 100
class- 10
HTML tags-1
Therefore, to answer the question of which style gets applied to the section element in the code snippet above. For the first CSS rule, the selector is just the section, which is an HTML tag hence, 1 point, for the second CSS rule, the selector is a class with the name box, hence, 10 points, for the last CSS rule, the selector is an id with the name box, hence, 100 points. The answer is no longer far-fetched, 100 is the largest number so the CSS rule with the id gets applied. The background color of the section would be yellow.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Specificity</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main-page">
<p style="color: green;">I love coding</p>
</main>
</section>
</body>
</html>
/* styles.css */
main p{
color: red !important;
}
#main-page p{
color: blue;
}
In the code snippet above, use specificity to get the CSS rule that gets applied to the paragraph element. It is important to note that the element has an inline styling attached to it, hence, 1000 points for that CSS rule. For the first CSS rule in the styles file, two HTML tags are there, and the !important keyword, each of the tags is 1 point, and the !imporant keyword is 1000, which is 1002 points. For the second CSS rule in the CSS file, an id which is 100 points, and a tag which is 1 point, sums up to 101 points. 1002 is the largest number and this corresponds to the first CSS rule in the styles file. Hence, the color of the paragraph would be red.
A Very Important Concept Or Just Another Gimmick?
Bottom line? The concept of specificity in CSS helps a lot in debugging. For instance, if you apply a CSS rule to an element and this style does not seem to take effect in the browser, it could be due to some reasons, one of which might be specificity. There might be a style somewhere in your CSS file or even inline CSS overriding the style you keep applying, the concept of specificity helps solve these bugs.
Top comments (0)