Specificity rules in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is CSS specificity?

CSS specificity is a set of rules browsers use to decide which CSS rule applies when multiple rules target the same element. It works like a score system to pick the strongest rule.

beginner

Which selector has higher specificity: an ID selector or a class selector?

An ID selector has higher specificity than a class selector. For example, <code>#header</code> beats <code>.menu</code> when both style the same element.

intermediate

How do inline styles affect specificity?

Inline styles (styles written directly in the HTML element using the style attribute) have the highest specificity and override most other CSS rules.

intermediate

Order these selectors from lowest to highest specificity: element selector, class selector, ID selector, inline style.

Lowest to highest specificity: element selector (e.g., <code>p</code>), class selector (e.g., <code>.box</code>), ID selector (e.g., <code>#main</code>), inline style (e.g., <code>style="color:red;"</code>).

beginner

What happens if two selectors have the same specificity?

If two selectors have the same specificity, the one that appears later in the CSS file wins and is applied to the element.

Which selector has the highest specificity?

A style attribute

B .container

C p

D #header

Inline styles (style attribute) have the highest specificity, even higher than ID selectors.

If two CSS rules have the same specificity, which one applies?

A The one written first in the CSS file

B The one with fewer selectors

C The one with more selectors

D The one written last in the CSS file

When specificity is equal, the rule that appears later in the CSS file overrides earlier ones.

What is the specificity score of the selector div#main.content?

A 1 ID, 2 classes

B 2 IDs, 1 class

C 1 ID, 1 class, 1 element

D 3 elements

The selector has 1 ID (#main), 1 class (.content), and 1 element (div).

Which selector has the lowest specificity?

A .nav

B body

C #footer

D style attribute

Element selectors like body have the lowest specificity.

Why should you avoid using too many ID selectors for styling?

A Because IDs have high specificity making overrides difficult

B Because IDs are slow to load

C Because IDs are deprecated in CSS

D Because IDs do not work in modern browsers

High specificity of IDs can make it hard to override styles later, reducing flexibility.

Explain CSS specificity and how it affects which styles are applied to an element.

Think of specificity as a score that decides which CSS rule wins.

List the order of CSS selectors from lowest to highest specificity and give an example of each.

Remember inline styles are strongest, elements are weakest.