Why is this 11 class selector less specific than the ID? [duplicate]

Question

#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

Wang

No matter how many classes you have, it's still: class < ID – Vimen

Answer 1

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

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>

Renunciation

i guess he's aware about this, no ? here already added the points in his question – Hearts

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. – Renunciation

That quote is really the answer to OP's question: It's not base 10 calculations, 10 classes != 1 ID. – Mcquiston

Thanks @ObsidianAge, that makes it a little clearer, but I don't quite get why the combined class selector is 0,0,11,0? – Wang

@Wang elevent classes == 1 + 1 +1 ... +1 = 11 – Hearts

Oh! I understand what Obsidian Age meant now. Thanks for the clarification! – Wang

Answer 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.

Hearts

Or just use !important. – Mcquiston

@ibrahimmahrir yes but since it's about specifity and points i wanted to share a trick that allow the last one to be more specific considering points. – Hearts

@TemaniAfif can you please explain why this works? – Wang

@Wang i added an explanation ;) – Hearts