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