CSS Specificity Rules & Inheritance
In CSS, specificity and inheritance determine which styles are applied to elements when multiple rules target the same element. Understanding these concepts is essential for writing clean, maintainable, and conflict-free CSS.
CSS Specificity
Specificity is a weighting system that browsers use to determine which CSS rule applies when multiple rules target the same element. The more specific a selector, the higher its priority.
Specificity Hierarchy
- Inline styles –
style="..."on an element (highest specificity). - IDs –
#idselectors. - Classes, attributes, pseudo-classes –
.class,[attr],:hover. - Elements & pseudo-elements –
div,p,::before(lowest specificity).
If two selectors have the same specificity, the later one in the stylesheet wins (source order).
Example – Specificity in Action:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Specificity Example</title>
<style>
p { color: blue; } /* Element selector */
.highlight { color: green; } /* Class selector */
#unique { color: red; } /* ID selector */
</style>
</head>
<body>
<p>This text is blue (element selector).</p>
<p class="highlight">This text is green (class selector).</p>
<p id="unique">This text is red (ID selector).</p>
</body>
</html>
CSS Inheritance
Inheritance allows certain CSS properties to pass down from a parent element to its children. This makes CSS efficient because you don’t need to apply the same property to every element individually.
Inherited Properties
Commonly inherited properties include:
colorfont-familyfont-sizeline-heightvisibility
Note: Most layout and box model properties like margin, padding, border do not inherit by default.
Example – Inheritance in Action:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Inheritance Example</title>
<style>
body {
color: blue; /* Parent color */
font-family: Arial; /* Parent font */
}
</style>
</head>
<body>
<p>This paragraph inherits color and font from the body.</p>
<div>
<p>This nested paragraph also inherits the same styles.</p>
</div>
</body>
</html>
Combining Specificity & Inheritance
Inheritance can be overridden by more specific rules. Even if a property is inherited from a parent, a class, ID, or inline style can change it.
Example – Override Inheritance:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Override Inheritance</title>
<style>
body {
color: blue; /* Parent color */
font-family: Arial; /* Parent font */
}
.highlight {
color: green; /* Overrides inherited blue */
}
</style>
</head>
<body>
<p>This paragraph inherits the blue color from the body.</p>
<p class="highlight">This paragraph is green, not inherited blue.</p>
<p style="color: red;">This paragraph is red due to inline style.</p>
</body>
</html>