Skip to content
card background pattern
Level 1

Modern CSS Design Systems

Unlock Full Course

$49.99 $29.99

Or

$24.99/Month

CSS Specificity

We will now look at specificity in CSS and it’s importance. This is important to understand so that we don’t override CSS and end up using countless !importants.

Downloads

Comments

N
about 1 month ago

@Charles Merriam Could you be more specific?

Charles Merriam
about 2 months ago

This is a somewhat poor video, probably from mirroring the original bad article. As an alternate summary:

Specificity = Ordering between matching CSS rules. When multiple rules match, they applied in order from highest (e.g., !important tags) to lowest (e.g., an element tag like 'h3'). Attributes in each rule are applied except for attributes set by higher level rule.

The ordering is done like a tuple, counting the number of: (!important tags, inline styles, classes or types or attribute selectors or pseudo-classes, element or pseudo-elements, line number as loaded so that later declarations are higher). It ordered like tuples, meaning that the first non-matching tuple element is first. This approach puts the !important tags and load order into the same tuple.

Note that hovering on a rule in Visual Studio will show the middle elements (inline style, count of classes/attributes/pseduo-classes, elements and pseduo-elements).

This video could use a lot more examples and less hand waving.

Something to say?

Become a Pro