Specificity
Save
How Specificity Works
The specificity of a CSS rule is calculated based on the number and type of selectors it uses.
Inline styles have the highest specificity, followed by ID selectors, class selectors, and element selectors.
For example, the following inline style will have higher specificity than the following element style:
<p style="color: red;">This is some text</p><p>This is some text</p>
If two rules have the same specificity, the rule that appears later in the CSS code will take precedence.
Specificity and CSS Inheritance
Specificity also affects how CSS inheritance works.
When an element inherits a property from its parent, the inherited property will have the same specificity as the property in the parent's style rule.
However, if the child element has its own style rule that overrides the inherited property, the child's rule will have higher specificity and will take precedence.
Using Specificity to Control Style
Understanding specificity is important for controlling the appearance of your web pages.
By using specificity, you can ensure that the styles you want to apply will be applied, even if there are other rules that could potentially override them.
Here are some tips for using specificity to control style:
- Use inline styles for the most important styles that you want to apply to an element.
- Use ID selectors for styles that you want to apply to a specific element.
- Use class selectors for styles that you want to apply to multiple elements.
- Use element selectors for styles that you want to apply to all elements of a certain type.
- Use the cascade to your advantage by placing more specific rules after less specific rules.
Specificity and Browser Support
Most modern browsers support specificity as defined in the CSS specification.
However, there are some older browsers that do not support specificity correctly.
If you are targeting older browsers, you may need to use workarounds to ensure that your styles are applied as intended.
