Selectors and specificity

Basic syntax

You may remember h1 from the HTML lessons: it usually marks the main heading. In a CSS rule, the part before the braces is the selector. The braces contain the declaration block.

Within each declaration, the text before : is the property, and the text after it is the value. Separate declarations with semicolons.

h1 { color: yellow; font-size: 5px; }
/* selector { property: value; property: value; } */

The tiny font size is the original syntax example, not a recommendation for readable body text.

Universal selector

A selector identifies the elements to style. The universal selector, *, has a broad reach: it matches every element. It is often used in a reset to establish defaults such as margin or padding.

*{color: yellow; font-size: 5px}

Type selector

A type selector matches a named HTML element. For example, this rule applies to h1 elements:

h1{color: yellow; font-size: 5px}

Class selector

A class selector begins with a dot, followed by the class name. An element can have more than one class, and rules for both classes can apply to it.

In the original example, classes a and b both set the color on one element. When equally specific rules conflict and the other cascade conditions are the same, the later rule wins, producing red.

Open the original class-selector example on CodePen.

ID selector

An ID selector begins with #:

#id{color: red; font-size: 5px;}

A class can be reused on multiple elements in the same document. An ID should uniquely identify one element in that document.

Specificity and the cascade

When multiple rules set the same property, their priority determines which value is used. The original lesson introduces specificity with this simplified score table:

In the simple examples here, an ID selector takes precedence over a class selector, and equally specific declarations are resolved by source order.

The final example adds !important to a color declaration on a type selector. That declaration overrides the competing normal declaration from an ID selector. The original recommendation is to avoid using !important excessively, because doing so makes later conflicts difficult to understand.

Open the original important-declaration example on CodePen.

Editorial correction: specificity is not literally a decimal score, and !important does not add 10,000 points. Specificity compares selector components, while importance and other cascade factors are considered separately. The table preserves the source's beginner analogy, not the complete cascade algorithm. The original text also inconsistently called the ID score ten; its table uses one hundred.

We have introduced universal, type, class, and ID selectors. Other tools include child, descendant, sibling, and pseudo-class selectors. The next lesson explores relationships between elements.