Categories
CSS Specificity is a concept that determines which CSS rules are applied to an element when multiple conflicting styles are defined. When different CSS rules target the same element, the specificity of the selectors in those rules determines which styles will take precedence.
The specificity of a selector is calculated based on the combination of its components, including the number of ID selectors, class selectors, and element selectors. The general rule is that the more specific a selector is, the higher its specificity, and the more likely it is to override other less specific styles.
The following is a breakdown of the components used to calculate specificity:
- ID selectors: Each ID selector contributes 100 points to the specificity.
- Class selectors, pseudo-class selectors, and attribute selectors: Each of these contributes 10 points to the specificity.
- Element selectors and pseudo-element selectors: Each of these contributes 1 point to the specificity.
Let's go through examples for each component to understand CSS specificity:
1. ID Selector Example:
<!DOCTYPE html>
<html>
<head>
<title>ID Selector Specificity Example</title>
<style>
#content {
color: red; /* Specificity: 100 */
}
</style>
</head>
<body>
<div id="content">This is a red text.</div>
</body>
</html>
In this example, the #content ID selector has a specificity of 100. As a result, the text inside the <div> element will be displayed in red.
2. Class Selector Example:
<!DOCTYPE html>
<html>
<head>
<title>Class Selector Specificity Example</title>
<style>
.highlight {
color: blue; /* Specificity: 10 */
}
</style>
</head>
<body>
<p class="highlight">This is a blue text.</p>
</body>
</html>
In this example, the .highlight class selector has a specificity of 10. It will override the default text color and make the text inside the <p> element blue.
3. Element Selector Example:
<!DOCTYPE html>
<html>
<head>
<title>Element Selector Specificity Example</title>
<style>
p {
font-size: 20px; /* Specificity: 1 */
}
</style>
</head>
<body>
<p>This text has a font size of 20px.</p>
</body>
</html>
In this example, the p element selector has a specificity of 1. It sets the font size of all <p> elements to 20px.
4. Combination of Selectors:
<!DOCTYPE html>
<html>
<head>
<title>Combination of Selectors Specificity Example</title>
<style>
body p {
font-weight: bold; /* Specificity: 2 (1 for p and 1 for body) */
}
.highlight {
font-weight: normal; /* Specificity: 10 */
}
</style>
</head>
<body>
<p class="highlight">This text has normal font weight because class selector is more specific.</p>
</body>
</html>
In this example, we have two conflicting styles for the <p> element. The first style selects the <p> elements inside the <body> (specificity: 2), while the second style applies to elements with the class "highlight" (specificity: 10). Since the class selector has higher specificity, it will take precedence and make the text inside the <p> element have normal font weight.
Understanding CSS specificity is essential to ensure that the intended styles are applied correctly to the elements on a webpage, especially when dealing with complex styles and CSS frameworks. By understanding specificity, you can write more maintainable and predictable CSS code.