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?

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!

22 Likes

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

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?

1 Like

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

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

Thanks for letting me know. :+1:

I found this image really helpful!! http://www.standardista.com/wp-content/uploads/2012/01/specifishity1.pdf

16 Likes

Hey guys, so if I applied p.main, would that affect nested <p> elements, or will it only affect regular p tags? If not, is there a possible way to reach nested <p> tags using the format .main p?

2 Likes

p.main css selector will select all paragraphs which have a class main

.main p will select all paragraph which have elements with class .main as parent (any depth).

6 Likes

Oh ok, thank you very much!

1 Like

Can I chain selectors of the same specificity, instead of using classes? Something like this:
div h5 {color: rebeccapurple;}

1 Like

That is possible, why wouldn’t that be possible?

Because it’s not shown in the exercises :slight_smile: Thanks for the answer.

True, and then good that you ask the question. But I would then also advise for next time, to simply try if it works. Be curious :slight_smile:

its pretty simple to test:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>example</title>
</head>
<body>
  <h5>no</h5>
  <div>
    <h5>yes</h5>
  </div>
</body>
</html>
div h5 {
  color: red;
}
2 Likes

Shouldn’t we put a comma between “div” and “h5” in our CSS code?

1 Like

That would achieve something very different. div h5 targets all h5 heading elements nested somewhere in a div, while div, h5 would simple target all div's and h5's.

Comma separated values simple allow you to apply css rules to multiple elements in one go.

5 Likes

Uh, sorry. Didn’t get it at first. Now I see that it was intended to avoid assigning any class to the div element. Thanks for your reply!

thanks that’s super helfpul <3

ok… does the selector arrangement matters?

depends on what you arrangement, like so:

div {
    // properties
}


p {
    // properties
}

But not having a logical order would be bad practice.

like this: div p or p div. Then the order very much matters, these two different two selectors work very differently

Ok, thank you very much but I meant in the case where one is writing a css code we see situations like

p.destination

and .destination p … what are the differences here?
and also when styling can we go in between lines of an html or must one style the pages from the top to the bottom or the html document.

hope I didn’t ask too much