CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

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.

  1. 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:

CSS Specificity
  • 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:

CSS Specificity
  • 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:

CSS Specificity



ADVERTISEMENT
ADVERTISEMENT