Scribd
Upload
18 views

CSS Specificity

Uploaded by

kgsrpofficial
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views

CSS Specificity

Uploaded by

kgsrpofficial
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

CSS Specificity -kaushal

kanar

CSS Specificity helps determine what style will be applied to the


HTML element(s) when there are overlapping or multiple CSS
rules.
It is a value or weight assigned to a CSS selector. The higher the
specificity, the more precedence the selector has.
Let's consider the following code

<html>
<head>
<style>
*{
color: gray;
}
#title{
color: red;
}
.h1{
color: blue;
}
h1{
color: pink;
}
</style>

</head>
<body>
<h1 id="title" class="h1"
style="color:purple">kaushal</h1>
</body>
</html>

Copy

Here the question is, what color will h1 be assigned to? This is
calculated based on the selector's components which we will
discussed in this tutorial.

The Cascade Algorithm


CSS stands for Cascading Stylesheets. The cascade is the
algorithm for solving conflicts where multiple CSS rules apply to an
HTML element. It's the reason that the text of the button styled
with the above CSS will be purple.
Understanding the cascade algorithm helps you understand how
the browser resolves conflicts like this. The cascade algorithm has
4 distinct stages.

1. Position and order of appearance: the order in which


your CSS rules appear
2. Specificity: an algorithm that determines which CSS
selector has the strongest match
3. Origin: the order in which CSS appears and where it
comes from, whether that is a browser style, CSS from a
browser extension, or your authored CSS
4. Importance: some CSS rules are weighted more heavily
than others, especially with the !important rule type

Lets look into all these one by one

Effect of Position
If there are two rules that have selectors of identical specificity,
the last one to be declared won. In an HTML page, you can add
styles in different ways: through a <link> tag, a <style> tag, or
directly in the element's style attribute. If you have
one <link> tag at the top of your page and another at the bottom,
the styles from the bottom one will be used. The same goes
for <style> tags; the ones lower down on the page take priority.
An inline style attribute with CSS declared in it will override all
other CSS, regardless of its position, unless a declaration has !
important defined.
If the browser doesn't support a property, it is ignored!

Specificity
CSS specificity determines which style rules get applied to an
element when there are conflicts. Higher specificity means the
style will be used. It's calculated based on a point system involving
inline styles, IDs, classes, and tag names.
Inline Styles

Inline styles have the highest specificity and will always override
styles if other selector(s) are also defined.

<html>
<head>
<style>
*{
color: gray;
}
#title{
color: red;
}
.h1{
color: blue;
}
h1{
color: pink;
}
</style>
</head>
<body>
<h1 id="title" class="h1"
style="color:purple">Kaushal</h1>
</body>
</html>

Copy

Here, you can see that the color: purple is applied to the h1 tag.
ID Selector

The ID selector also has high specificity but comes after the inline
Style specificity. So, if we have an ID and other selectors except
the inline style, then the element will take the ID selector
properties and values.

<head>
<style>
*{
color: gray;
}
#title{
color: red;
}
.h1{
color: blue;
}
h1{
color: pink;
}
</style>
</head>
<body>
<h1 id="title" class="h1">kaushal</h1>
</body>
</html>

Copy

Here, you can see the color: red is applied to the h1 tag.
Class and Attribute Selectors

Class selectors and attribute selectors have moderate specificity.


Suppose the element has a class or attribute selector and not an
inline style or ID selector, then the element will take properties
and values from the class or attribute selector.

<head>
<style>
*{
color: gray;

.h1{
color: pink;
}
</style>

</head>
<body>
<h1 class="h1">Kaushal</h1>
</body>
</html>

Copy

Here, you can see color:pink is applied to the h1 tag.


Element Selector:

Element selectors like <p>, <div>, <a>, etc. have low specificity.

<head>
<style>
*{
color: gray;
}
h1{
color: tomato;
}
</style>

</head>
<body>
<h1 class="h1">Kaushal</h1>
</body>
</html>

Copy

Here, you can see color:tomato is applied to the h1 tag.


Universal Selector:

Universal selectors (*) and combining selectors like not, first-child,


and last-child have the lowest specificity.

<head>
<style>
*{
color: gray;
}
</style>

</head>
<body>
<h1 class="h1">Kaushal</h1>
</body>
</html>

Copy

Here, you can see color:gray is applied to the h1 tag.


So, the order of specificity is:
Inline Style > ID Selector > Class or Attribute Selector >
Element Selector > Universal Selector
Specificity Calculation

To calculate specificity, assign a value to each part of the selector:

 Universal Selector: 0
 Element selectors and pseudo-elements: 1
 Class selectors, attribute selectors, and pseudo-classes: 10
 ID selectors: 100
 Inline styles: 1000

Then, add up the values of all the parts in the selector.


Here is an example

<h1 id="title" class="h1">Kaushal Kanar</h1>

Copy
Here, the specificity value will be 111 because ID has a specificity
of 100, the class has a specificity of 10, and the h1 element has a
specificity of 1.
In the case of a specificity tie, the rule that appears last in the CSS
is applied.

Importance
The !important flag in CSS is used to give a particular style rule
the highest level of importance, overriding any other competing
styles. When you add !important to a CSS rule, it will take
precedence over other rules affecting the same element,
regardless of their specificity. For example, if you have:

p {
color: red !important;
}

p {
color: blue;
}

Copy
The text in the <p> element will be red, not blue, because the !
important flag makes that rule more important.
an !important at the end of a CSS value gets a specificity score
of 10,000 points. This is the highest specificity that one
individual item can get.
However, it's generally best to use !important sparingly, as it can
make debugging and maintaining your stylesheets more
complicated. It can override styles in ways that are hard to trace,
leading to unexpected results.

Quick Quiz
What will be the specificity value of the following selector:

a.harryclass.rohan-class[href]:hover {
color: red;
}

Copy

Solution
To calculate the specificity value of the
selector a.harryclass.rohan-class[href]:hover, you can break
down its components:

 Element selectors: a contributes 1 point.


 Class selectors: .harryclass and .rohan-class each
contributes 10 points, totaling 20 points.
 Attribute selector: [href] contributes 10 points.
 Pseudo-class: :hover adds another 10 points.

Add up all these values:


1 (element) + 20 (classes) + 10 (attribute) + 10 (pseudo-class) =
41.
So, the specificity value of the selector a.harryclass.rohan-
class[href]:hover will be 41.

You might also like