CSS Specificity

Specificity

Menu CSS specificity

CSS Specificity

Depending where CSS rules are defined they can have different consequences on your pages.

There are examples on the W3C Schools website and information relating to how Specificity is calculated and how you use it within your code.

I won't attempt to re-write or try to explain this any more than other websites. This is just a page relating to issues that I have come across that influenced my designs. For example, the higher precidence of ID selectors have a higher specificity than attribute selectors.

W3C say:

" If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.

Note: Specificity is a common reason why your CSS-rules don't apply to some elements, although you think they should. "

Top

Specificity Hierarchy

The W3C website has a table that maps this out. However, they miss the Universal Selector. I have added this to the table.

Every CSS selector has a position in the specificity hierarchy.

Priority	Example	Description
Inline style	<h1 style="color:pink">	Highest priority, directly applied with the style attribute
Id selectors	#navbar	Second highest priority, identified by the unique id attribute of an element
Classes and pseudo-classes	.test, :hover	Third highest priority, targeted using class names
Attributes	[type="text"]	Low priority, applies to attributes
Elements and pseudo-elements	h1, ::before, ::after	Lowest priority, applies to HTML elements and pseudo-elements
Universal Selectors and combinators	*	(e.g., :not()) have the lowest specificity and are not counted in the specificity calculation.

CSS Specificity

Links