According to this exercise, `.main p` is more specific than the `p` selector. Is `.main p` also more specific than the `p.main` or `#main` selectors?


#1

Question

According to this exercise, .main p is more specific than the p selector. Is .main p also more specific than the p.main or #main selectors?

Answer

Assuming our selectors are all targeting the same element, the .main p selector and the p.main selectors would have the same specificity. The order of specificity from highest to lowest is:

1) id selector (`#main`)
2) descendant selector _and_ chained or qualified selector (`.main p` and `p.main`)

If you are ever in doubt about which selector will win out in the styles race, check out this nifty specificity calculator!


FAQ: Learn CSS Selectors Visual Rules - CSS Setup Selectors - Chaining and Specificity
#2

2 posts were split to a new topic: Css selector rank


#3

Hey,
I’d like to know more about specificity, so I tried the link to ‘this nifty specificity calculator’.
But I get a ‘Site is not available’ error.

Since I can’t find a replay addressing this, anyone know what’s up?


#4

Hi rauwt, it’s working for me. Maybe it was just down the day you tried?


#5

Hi Jason,
I tried the link again and this time it works.

Thanks for letting me know. :+1: