CSS Selectors and Specificity: Elements, Classes, IDs, Attributes, and Combinators

A CSS selector is the pattern that tells the browser which elements a rule applies to, and specificity is the scoring system the browser uses to pick a winner when two rules target the same element and set the same property. Specificity is counted in three columns — ID, class, type — usually written like 1-2-1, and the browser compares those columns from left to right. Because the columns never carry over the way ordinary digits do, one ID selector beats any number of class selectors, and one class selector beats any number of type selectors.

The selectors and what each one is worth

• Type (element) selector — p, h1, ul. Matches every element with that tag name. Weight 0-0-1.
• Class selector — .card. Matches any element whose class attribute includes that word. Weight 0-1-0.
• ID selector — #nav. Matches the element carrying that id. Weight 1-0-0.
• Attribute selector — [type="email"]. Worth the same as a class, 0-1-0. Operators let you match part of a value: ^= the value starts with, $= the value ends with, *= the value contains the substring anywhere, ~= the value is a space-separated list containing that exact whole word, |= the value is exactly that or begins with it immediately followed by a hyphen.
• Pseudo-class — one colon: :hover, :first-child, :checked. Describes a state or a position rather than markup. Weight 0-1-0.
• Pseudo-element — two colons: ::before, ::first-line. Styles a piece of an element that has no tag of its own. Weight 0-0-1, the same as a type selector.
• Universal selector — *. Matches everything and adds nothing: 0-0-0.

Combinators describe relationships

• A B (a space) — descendant: any B anywhere inside an A, at any depth.
• A > B — child: only a B that is a direct child of A.
• A + B — next sibling: the single B that immediately follows A under the same parent.
• A ~ B — subsequent sibling: every B that follows A under the same parent, immediately or not.

Combinators change what gets matched, but they add nothing to the score. #main a and #main > a both weigh 1-0-1.

Adding it up

Break the selector into its simple parts and drop each one into its column. #nav ul li a.active has one ID, one class, and three type selectors, so it scores 1-1-3. Then compare the competing rules: ID column first; if that ties, the class column; if that ties too, the type column. Only when all three columns tie does position matter, and then — among declarations of the same origin and cascade layer — the one written later wins.

Two things sit outside the selector score entirely. A declaration in an inline style attribute outranks any normal declaration from a stylesheet, no matter how specific that selector is. And a declaration flagged !important in an author stylesheet overrides normal declarations from the same origin, including a normal inline one. Both are worth avoiding while you're learning, because they paper over the cascade instead of working with it.

For the wider HTML and CSS picture, see the WGU D276 Web Development Foundations study guide.

A worked example

Here is one link that four different rules all try to color:

<nav id="main">
  <ul class="menu">
    <li><a class="link active" href="/pricing">Pricing</a></li>
  </ul>
</nav>

#main a wins, and it isn't close: three chained class selectors lose before the class column is ever read, because the ID column is compared first and 1 beats 0. Notice also that .link.active counts as two classes even though it targets one element — specificity is read off the selector as it's written, so a repeated simple selector counts every time it appears, not once per element matched.

Mistakes people actually make

• Adding the columns into a single total. 0-4-1 is not "five." Compare left to right and stop at the first column that differs.
• Assuming the last rule always wins. Source order is the tiebreaker, not the first test. It only applies when all three columns match exactly.
• Expecting combinators to add weight. Rewriting .menu a as .menu > li > a adds two type selectors, not "child selector power."
• Treating [id="main"] like #main. They match the same element, but the attribute form weighs 0-1-0 and the ID form weighs 1-0-0.
• Reaching for !important. It wins, then the next conflict needs another one. Adding a class to the element you actually want to style is almost always the better fix.

Two syntax details worth knowing

For backward compatibility, browsers still accept single-colon spellings of the four original pseudo-elements — :before, :after, :first-line, and :first-letter. The colon count is only a spelling convention there; those are pseudo-elements either way, so they still land in the type column. The double-colon form is the one to write in new code, and every pseudo-element added since then requires it.

A few pseudo-classes score differently from the flat 0-1-0 above. :where() always contributes 0-0-0, whatever you put inside it, which makes it useful for writing defaults that are easy to override. :is(), :not(), and :has() contribute nothing themselves but take on the weight of their most specific argument, so p:not(#fakeId) weighs 1-0-1 even though no element with that ID has to exist.

How to reason about the tricky cases

Start by confirming the two rules really do collide: they must match the same element and set the same property. A common false alarm is inheritance — a color inherited from body loses to any rule that matches the child directly, however weak that rule is, because an inherited value is only used where no declaration targets the element itself.

When you're stuck, write both selectors out and tally three columns on paper before you touch the code. If a rule still refuses to apply, check for an inline style attribute in the HTML, which outranks every normal stylesheet declaration. And when you catch yourself escalating — adding an ID just to win — that's the signal to lower the other rule instead. Keeping most of your selectors at a single class keeps the whole sheet predictable.

Work through more of these in the D276 practice question set, and keep the MDN specificity reference open while you experiment.