1
#box {
  width: 100px;
  height: 100px;
  background-color: #ff0;
}

.one.two.three.four.five.six.seven.eight.nine.ten.eleven {
  background-color: #f00;
}


<div id="box" class="one two three four five six seven eight nine ten eleven"></div>

If the following points are given to each type of selector, then how come the above class selector does not override the ID selector?

Style attribute: 1,0,0,0 ID: 0,1,0,0 Class, pseudo-class, attribute selector: 0,0,1,0 Element: 0,0,0,1

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
bernk
  • 1,155
  • 2
  • 12
  • 22

2 Answers2

4

Because the CSS specificity point system is exactly as you have specified:

  • Style attribute: 1,0,0,0
  • ID: 0,1,0,0
  • Class, pseudo-class, attribute selector: 0,0,1,0
  • Element: 0,0,0,1

Specificity

The commas are there to remind us that this isn't really a "base 10" system, in that you could technically have a specificity value of like 0,1,13,4 - and that "13" doesn't spill over like a base 10 system would.

Your ID selector is 0,1,0,0, and your combined class selector is 0,0,11,0.

At no point will any combination of class selectors ever override a single ID selectors, as is seen in the following:

#box {
  width: 100px;
  height: 100px;
  background-color: #ff0; /* yellow */
}

.one.two.three.four.five.six.seven.eight.nine.ten.eleven {
  background-color: #f00; /* red */
}
<div id="box" class="one two three four five six seven eight nine ten eleven"></div>
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • i guess he's aware about this, no ? here already added the points in his question – Temani Afif Apr 09 '18 at 21:34
  • 1
    OP asks "*If the following points are given to each type of selector, then how come the above class selector does not override the ID selector?*". The answer is because it's not a base 10 system, and the points don't 'spill over'. Thus, more than 10 classes don't override a single ID. – Obsidian Age Apr 09 '18 at 21:36
  • That quote is really the answer to OP's question: It's not base 10 calculations, `10 classes != 1 ID`. – ibrahim mahrir Apr 09 '18 at 21:41
  • Thanks @ObsidianAge, that makes it a little clearer, but I don't quite get why the combined class selector is 0,0,11,0? – bernk Apr 09 '18 at 22:01
  • @bernk elevent classes == 1 + 1 +1 ... +1 = 11 – Temani Afif Apr 09 '18 at 22:05
  • Oh! I understand what Obsidian Age meant now. Thanks for the clarification! – bernk Apr 09 '18 at 22:24
2

As commented/answered above, ID will always win but here is a trick to make your classes win.

#box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.one.two.three.four.five.six.seven.eight.nine.ten.eleven:not(#random_id) {
  background-color: red; 
}
<div id="box" class="one two three four five six seven eight nine ten eleven"></div>

Why this works when we know that pseudo-classes are less specific than ID?

Simply because The :not() itself doesn't add anything to the specificity number as other pseudo-classes do. However, the selectors within the :not() do.ref

So it's like i added an ID to my class selectors.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415