What is the difference between class and id selector? Which one gets high precedence?

Difficulty: 2/10

selector specificity, CSS cascade

Class vs ID Selector in CSS and Their Precedence

Both class and ID selectors are used to target elements in CSS, but they differ in usage, specificity, and how often they should be used. The ID selector has higher specificity than the class selector and therefore takes precedence when both apply to the same element.

Class Selector (.class-name)

1
Begins with a dot (e.g., .button).
2
Can be applied to multiple elements on a page.
3
Ideal for reusable styling across many elements.
4
Specificity score: 0-0-1

ID Selector (#id-name)

1
Begins with a hash (#) symbol (e.g., #header).
2
Must be unique and applied to only one element per page.
3
Best for targeting a specific unique element.
4
Specificity score: 0-1-0

Because an ID selector has a higher specificity score than a class selector, it will override class styles when both are applied to the same element unless a class selector uses !important.

Example Showing Precedence

Scenario Questions

0-2 years experience

2-5 years experience

Follow-up Questions