Specificity of Nested CSS Selectors

Question

I am trying to figure out why "Item One" does not show as orange, below. According to specificity rules, the selector .one.two, should have a specificity score of 20 (two classes). .one li should have 11 (one class, one element). So it feels like it should show as orange, not blue.

Any idea why it doesn't?

Also, as a side question, why can't I have a space between the .one and the .two in the .one.two selector? That works for Chrome it seems, but not here.

Link to specificity calculations.

<!DOCTYPE html>
<html>

<head>
  <style>
    .one {
      color: red;
    }
    .two {
      color: green;
    }
    .one li {
      color: blue;
    }
    .one.two {
      color: orange;
    }
  </style>
</head>

<body>
  <div>
    <ul class="one two">
      <li>Item One</li>
    </ul>
  </div>
</body>

</html>

Community · Accepted Answer · 2020-06-20 09:12:55Z

6

So it feels like it should show as orange, not blue.

Any idea why it doesn't?

Your ul is orange. But your li is colored blue independently of the color of its parent because you have explicitly targeted it and applied a color to it. It will not inherit its parent's color if you override the implicit color: inherit.

why can't I have a space between the .one and the .two in the .one.two selector?

Because that's a completely different selector. .one .two matches a .two inside a .one. .one.two (with no space) matches an element that is both .one and .two.

<div class="one">
  <div class="two"></div> /* matched by .one .two */
</div>

<div class="one two"></div> /* matched by .one.two */

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 5, 2016 at 12:20

user229044♦

241k41 gold badges347 silver badges350 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anders Over a year ago

<div class="one two three"> does not just look for .one.two.three though, right? It seems it also looks for .one and .two and .three independently. Is there some kind of order it searches? I guess it looks for them independently, but not nested.

user229044 Over a year ago

You're thinking about this backwards. <div ...> does not "look for" .one.two.three. The <div> is just a static DOM node, sitting there. The CSS selects the matching elements via selectors (the .one.two.three part) and applies rules to them ( the color: blue part). A .one.two.three selector will match any combination of those classes on a single element.

Anders Over a year ago

That's very helpful. Thank you.

Gaurav Aggarwal · Accepted Answer · 2016-04-05 12:19:37Z

0

Your css is working fine but there is also this css

.one li {
  color: blue;
}

So your css is applying orange color on .one.two but .one li css overlapping and showing blue color.

You can add this css if you want orange color on li under .one.two

.one.two li {
  color: orange;
}

answered Apr 5, 2016 at 12:19

Gaurav Aggarwal

10.2k8 gold badges42 silver badges76 bronze badges

Comments

Hesham Hassan · Accepted Answer · 2016-04-05 12:20:11Z

0

Just you need to add li in the selector after .one.two

<!DOCTYPE html>
<html>

<head>
  <style>
    .one {
      color: red;
    }
    .two {
      color: green;
    }
    .one li {
      color: blue;
    }
    .one.two li {
      color: orange;
    }
  </style>
</head>

<body>
  <div>
    <ul class="one two">
      <li>Item One</li>
    </ul>
  </div>
</body>

</html>

answered Apr 5, 2016 at 12:20

Hesham Hassan

7616 silver badges14 bronze badges

Collectives™ on Stack Overflow

Specificity of Nested CSS Selectors

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related