What Is CSS?
CSS (Cascading Style Sheets) language is used to style the elements written in a markup language like HTML. It separates the content from the visual representation of the sites. The relation between HTML and CSS is strongly tied together since HTML is the very foundation of a site, and CSS is all the aesthetics of an entire website.
What Is Specificity?
When multiple CSS rules target the same element, the selector with the highest specificity value will take precedence, and its corresponding style declaration will be applied to the HTML element. Specificity can be considered a ranking system determining which style declarations ultimately apply to an element.
How Does CSS Specificity Work?
The selector with the greatest specificity value will take precedence if multiple CSS selectors are vying to apply the same property or properties to a set of HTML elements.
Why Is Specificity Important in CSS?
It is an algorithm called specificity, which uses the browser to identify the CSS declaration that is most pertinent to the element, and it identifies the property values that are applied to the element.
Advantage of Specificity:
- Specificity allows developers to control the style applied to elements.
- It helps to organize your CSS code.
- It helps to understand why your style is not applied.
- It helps write cleaner and less CSS code.
- It helps developers predict which style is applied to elements.
Understanding CSS Selector Types Before Specificity Rules:
- Id selector: The #id selector allows you to target an element by referencing the id HTML attribute.
- Class selector: The class selector selects the class attribute of the HTML document. It is denoted by(.)in CSS.
- Universal selector: The universal selector (*) selects all HTML elements of the page.
- Attribute selector: The [attribute] selector selects an element with a specified attribute.
- Pseudo element: Pseudo-elements (::) style specifies the parts of a component. They can target the first letter or first liner first line. They can also be used to insert content before or after the component. Position and order of appearance: the order in which your CSS rules appear.
- Pseudo class: Pseudo-classes (:) are primarily used to style an element that's under various states. When referring to the state, this includes the condition or user behaviours, such as hover, active, focus, or disabled. States generally involve user interaction.
Specificity Rules:
- Rule 1: Equal specificity: the most recent rule is applicable.
- Rule 2: Compared to attribute selectors, ID selectors have a higher specificity value.
- Rule 3: Contextual selectors have a higher specificity than a single-element selector.
- Rule 4: Compared to element selectors, class selectors have a significantly greater specificity value.
- Rule 5: The specificity value of the universal selector and inherited selectors is 0.
- Rule 6: The body and the * consist of a specificity value of zero (0).
Cascade Algorithm
The cascade is an algorithm to solve conflicts where multiple CSS rules apply to an HTML element.
The cascade algorithm helps you to understand how the browser resolves conflicts.
The Cascade Algorithm Has Four Distinct Stages
- Position and order of appearance: The order in which your CSS rules appear.
- Specificity: Algorithm that determines which CSS selector has the strongest match.
- Origin: The sequence in which CSS is shown and its source if it is a browser. Style CSS from a browser extension or your authored CSS.T
- Importance: Particularly with the! Necessary rule type: some CSS rules have a higher weight than others.
See Also: 10 Real-World Problems That Blockchain Can Resolve
Example of CSS Specificity:
<html>
<head>
<style>
*{
color: gray;
}
/* specificity value of id selector :100 */
#title{
color: red;
}
/* specificity value of class selector :10 */
.h1{
color: blue;
}
/* specificity value of h1 is:1 */
h1{
color: pink;
}
/* specificity value of h1 tag with !important is :10000 */
h1{
color: green !important;
}
</style>
</head>
<body>
<h1 id="title" class="h1" >Aspire software solutions</h1>
</body>
</html>How to Calculate Specificity:
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
- ! important:10000
Then, add up the values of all the parts in the selector.
The Below Image Is the Output of Our Code:
- In the above image, we can see the text colour is green! Important and have the highest priority over others if we remove them! Important, then the text colour output will be purple colour because the style attribute has the second highest priority after! Important, and we cannot override! important property
We Take One More Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Style Application</title>
<style>
a.title.hover-class[href]:hover {
color: red;
}
/* #link{
color: green;
} */
</style>
</head>
<body>
<!-- HTML Element -->
<a class="title hover-class" href="#">Hover over me</a>
</body>
</html>Solution:
To calculate the specificity value of the selector a.title.hover-class [href]: hover, you can break down its components:
- Element selectors: a contributes 1 point.
- Class selectors: title and hover-class each contribute 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 is a title. Hover-class [href]: hover will be 41.
Output of the Above Example:
- Above the image, you can see the text colour is red because of the sum of specificity; we calculate 41. If we uncomment the #link selector in CSS, then the text colour output will become green. You can see the output in the below image.
Conclusion:
Need a Software that Integrates Seamlessly? We Build Custom.
