Before diving in, let's make sure you understand the building blocks used throughout this lesson.

What Is a CSS Selector?

A selector is the part of a CSS rule that identifies which HTML element(s) you want to style.

/* The selector is "p" — it targets all <p> elements */
p {
  color: red;
}

The Three Main Selector Types You Need to Know

1. Element selector · targets HTML tags by name.

p { color: red; }    /* styles every <p> */
h1 { color: blue; }  /* styles every <h1> */

2. Class selector · targets elements that have a specific class attribute. Written with a dot (.) before the name.

.highlight { color: yellow; }
/* This styles any element with class="highlight" */

3. ID selector · targets ONE specific element with a matching id attribute. Written with a hash (#) before the name.

#main-title { color: green; }
/* This styles the element with id="main-title" */

💡 Key rule to remember: An id must be unique on a page · only one element should have any given id. Classes can be shared by many elements.

What Is a Style Declaration?

A declaration is the property: value pair inside curly braces.

p {
  color: blue;       /* This is one declaration */
  font-size: 18px;   /* This is another declaration */
}

What Is Specificity?

Specificity is the scoring system that browsers use to decide which CSS rule "wins" when two or more rules target the same element and set the same property.

Think of it like a competition between your CSS rules. Every selector has a score (called its specificity weight). When two rules conflict, the one with the higher score wins, and its style gets applied.

Why Does Specificity Exist?

Imagine you're building a website. You have a general rule that makes all paragraphs grey. Then later you want one special paragraph to be red. Without specificity, the browser wouldn't know which rule to use. Specificity is the tiebreaker.

Analogy: Think of specificity like priority lanes at an airport. Economy passengers (element selectors) use the regular queue. Business class passengers (class selectors) get a faster lane. First-class passengers (ID selectors) go straight through. The more specific you are, the faster you get to the front.

A First Look at the Problem Specificity Solves

<!-- HTML -->
<p class="test" id="demo">Hello World!</p>

/* Three rules, all targeting the same paragraph */
p       { color: red; }
.test   { color: green; }
#demo   { color: blue; }

Expected Output: The text "Hello World!" appears in blue.

Why blue? Because #demo (an ID selector) has a higher specificity score than .test (a class selector), which has a higher score than p (an element selector). The browser picks blue.

🤔 Thinking prompt: What would happen if you removed #demo { color: blue; }? Which colour would win then? Think about it before reading on.

CSS organises selectors into four levels, from lowest to highest priority.

Level 1 · Universal Selector and :where()

Weight: 0-0-0 (no priority)

The universal selector * matches everything, but it has zero specificity. The :where() pseudo-class also carries zero specificity weight.

* { color: grey; }        /* weight: 0-0-0 */
:where(p) { color: grey; } /* weight: 0-0-0 */

These are always overridden by any other selector.

Level 2 · Element Selectors and Pseudo-elements

Weight: 0-0-1

Element selectors target HTML tags. Pseudo-elements like ::before and ::after also sit at this level.

p      { color: red; }    /* weight: 0-0-1 */
h1     { color: blue; }   /* weight: 0-0-1 */
::before { content: "→"; } /* weight: 0-0-1 */

Level 3 · Class Selectors, Attribute Selectors, and Pseudo-classes

Weight: 0-1-0

This level includes classes (.myclass), attribute selectors ([type="text"]), and pseudo-classes (:hover, :focus, :nth-child()).

.test          { color: green; }   /* weight: 0-1-0 */
[type="text"]  { color: green; }   /* weight: 0-1-0 */
:hover         { color: green; }   /* weight: 0-1-0 */

Level 4 · ID Selectors

Weight: 1-0-0

ID selectors are the highest specificity you can normally use in a stylesheet. They always override classes and element selectors.

#demo { color: blue; }   /* weight: 1-0-0 */

Level 5 · Inline Styles

Weight: Even higher than IDs

Inline styles are written directly on an HTML element using the style attribute. They override all stylesheet rules.

<p style="color: pink;">This is pink no matter what.</p>

An inline style beats every other type of CSS selector.

Specificity is measured using a three-number notation: X-Y-Z

To compare two selectors, start from the left (X). The selector with the bigger X wins. If X is equal, compare Y. If Y is equal, compare Z. If all three are equal, the rule that appears later in the stylesheet wins (this is the cascade rule you may have learned previously).

Quick Weight Examples

Example 1 · Element Selector Alone

<html>
<head>
  <style>
    p { color: red; }
  </style>
</head>
<body>
  <p>Hello World!</p>
</body>
</html>

Expected Output: The text "Hello World!" appears in red.

Line-by-line explanation:

• p · This is an element selector targeting all <p> tags.
• { color: red; } · This sets the text colour to red.
• Specificity weight: 0-0-1
• Since there is only one rule, it wins by default.

Example 2 · Class Selector Overrides Element Selector

<html>
<head>
  <style>
    .test { color: green; }  /* weight: 0-1-0 */
    p     { color: red; }    /* weight: 0-0-1 */
  </style>
</head>
<body>
  <p class="test">Hello World!</p>
</body>
</html>

Expected Output: The text "Hello World!" appears in green.

Why green?

• Both rules target the same <p> element.
• .test has weight 0-1-0.
• p has weight 0-0-1.
• Comparing: 0-1-0 is greater than 0-0-1 (Y column: 1 > 0).
• Green wins.

🤔 Thinking prompt: What if you swap the order of the two rules in the stylesheet? Does the result change? Try it.

Example 3 · ID Selector Overrides Everything

<html>
<head>
  <style>
    #demo  { color: blue; }   /* weight: 1-0-0 */
    .test  { color: green; }  /* weight: 0-1-0 */
    p      { color: red; }    /* weight: 0-0-1 */
  </style>
</head>
<body>
  <p id="demo" class="test">Hello World!</p>
</body>
</html>

Expected Output: The text "Hello World!" appears in blue.

Why blue?

• The <p> element matches all three selectors.
• #demo has the highest weight: 1-0-0.
• Blue wins, regardless of order in the stylesheet.

Example 4 · Combined Selector with Higher Weight

Now here is where it gets interesting. What if we combine selectors? When you write p#demo, you are selecting a <p> element that also has id="demo". This combination adds up the weights.

#demo   { color: blue; }    /* weight: 1-0-0 */
p#demo  { color: orange; }  /* weight: 1-0-1  ← WINS */
.test   { color: green; }   /* weight: 0-1-0 */
p.test  { color: yellow; }  /* weight: 0-1-1 */
p       { color: red; }     /* weight: 0-0-1 */

<p id="demo" class="test">Hello World!</p>

Expected Output: The text "Hello World!" appears in orange.

Why orange?

• p#demo has weight 1-0-1 (1 ID + 1 element).
• #demo alone has weight 1-0-0 (1 ID, no elements).
• Comparing X: both have X=1. Tie. Compare Z: p#demo has Z=1, #demo has Z=0.
• 1-0-1 > 1-0-0 → orange wins.

🤔 Thinking prompt: Why does p.test (weight 0-1-1) lose to #demo (weight 1-0-0)? Because the X column (IDs) always overrules the Y and Z columns no matter how many classes or elements you have.

Example 5 · Equal Specificity: Last Rule Wins

When two selectors have identical weight, the browser uses the one that appears later in the stylesheet. This is called the cascade.

p { color: red; }    /* weight: 0-0-1 */
p { color: blue; }   /* weight: 0-0-1 — WINS because it comes last */

Expected Output: Blue.

Here is the complete picture from highest to lowest priority:

Let's practice reading and calculating weights of more complex selectors.

Worked Calculation 1

div p.highlight { color: purple; }

Break it down:

• div → element → adds 0-0-1
• p → element → adds 0-0-1
• .highlight → class → adds 0-1-0
• Total: 0-1-2

Worked Calculation 2

#header nav ul li a:hover { color: orange; }

Break it down:

• #header → ID → adds 1-0-0
• nav → element → adds 0-0-1
• ul → element → adds 0-0-1
• li → element → adds 0-0-1
• a → element → adds 0-0-1
• :hover → pseudo-class → adds 0-1-0
• Total: 1-1-4

Worked Calculation 3

.sidebar .widget h2 { color: teal; }

Break it down:

• .sidebar → class → adds 0-1-0
• .widget → class → adds 0-1-0
• h2 → element → adds 0-0-1
• Total: 0-2-1

Mistake 1 · Thinking Order Always Matters

Wrong thinking: "My rule comes after the other one, so it should win."

Correction: Order only matters when specificity weights are equal. If they are different, the higher weight always wins regardless of order.

#demo  { color: blue; }    /* weight: 1-0-0 */
p      { color: red; }     /* weight: 0-0-1 — comes after but LOSES */

Output: Blue. The ID beats the element selector no matter the order.

Mistake 2 · Adding More Classes Does Not Beat an ID

Wrong thinking: "I have three classes on my selector, so it must beat an ID."

.a.b.c { color: green; }   /* weight: 0-3-0 */
#demo  { color: blue; }    /* weight: 1-0-0 */

Correction: No number of class selectors can ever beat a single ID selector. The X column (ID count) is always more powerful than the Y column (class count). 0-3-0 loses to 1-0-0.

Mistake 3 · Forgetting That Combined Selectors Add Up

Wrong thinking: "p#demo is the same as #demo."

#demo   { color: blue; }    /* weight: 1-0-0 */
p#demo  { color: orange; }  /* weight: 1-0-1 — WINS */

Correction: p#demo adds the weight of both p (an element) and #demo (an ID), giving a total of 1-0-1, which is more than #demo alone at 1-0-0.

Mistake 4 · Thinking Inline Styles Can Be Overridden Without !important

<p style="color: purple;">I am always purple.</p>

#demo  { color: blue; }   /* Cannot override the inline style */

Correction: Inline styles override all stylesheet selectors. The only way to beat an inline style in your CSS is to use !important (which is covered in the next lesson).

Mistake 5 · Confusing :where() and Regular Pseudo-classes

Regular pseudo-classes like :hover or :focus have weight 0-1-0. But the special :where() function has weight 0-0-0 · it intentionally carries no specificity so it can be easily overridden. These are not the same.

p:hover  { color: blue; }    /* weight: 0-1-1 */
:where(p) { color: red; }   /* weight: 0-0-0 — always loses */