25

According to the CSS docs: http://www.w3.org/TR/CSS21/cascade.html#specificity

Specificity is defined by (amongst other things) the number of attributes and pseudo-classes in the selector.

So, my question is, is it possible to increase specificity by repeating the same classname over and over again?

For instance:

would

.qtxt.qtxt.qtxt.qtxt.qtxt
{
}

have a higher specificity than

.qtxt.lalgn
{
}

or

.lalgn .qtxt//(space added to create child selector)
{
}

?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Georges Oates Larsen
  • 6,812
  • 12
  • 51
  • 67

3 Answers3

34

Yes, it is possible and intentionally so. While this is not mentioned in the CSS2 spec, it is explicitly mentioned in the Selectors 3 spec:

Note: Repeated occurrances [sic] of the same simple selector are allowed and do increase specificity.

Therefore browsers must increase the specificity when encountering repeated simple selectors, as long as the selector is valid and applicable. This not only applies to repeated classes, but also applies to repeated IDs, attributes and pseudo-classes.

Given your code, .qtxt.qtxt.qtxt.qtxt.qtxt will have the highest specificity. The other two selectors are equally specific; combinators have no bearing in specificity calculations at all:

/* 5 classes -> specificity = 0-5-0 */
.qtxt.qtxt.qtxt.qtxt.qtxt

/* 2 classes -> specificity = 0-2-0 */
.qtxt.lalgn

/* 2 classes -> specificity = 0-2-0 */
.lalgn .qtxt

Also, the space in your last selector is the descendant combinator; the child combinator is >.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    I just encountered it in Material Design Lite and I have to say this has to be the weirdest CSS spaghetti abomination I ever encountered. I can't wrap my mind around that some people thought it will be a good idea to use something like this in a CSS library. – JoannaFalkowska Oct 25 '16 at 12:44
  • 1
    Isn't a common practice to specify CSS specificity with 4 numbers? (inline styles, IDs, Classes, Elements, i.e. x.x.x.x) – Remi May 01 '18 at 09:40
  • 2
    @Remi: That used to be the case with CSS2 because it was a single spec. Now that Selectors is a separate spec, inline styles can be assumed to be irrelevant when comparing selector specificity, since selectors cannot appear in inline style attributes anyway. So the newest specs (L3 and L4) all use 3 numbers. Though I've wondered if including the 4th number would help, even if it will always be zero as long as inline styles aren't being discussed. – BoltClock May 01 '18 at 10:31
1

.qtxt.qtxt.qtxt would have the highest specificity...

http://jsfiddle.net/nXBTp/1/

However, this is only the case if you repeat the class name more times that any other selector, for example:

http://jsfiddle.net/nXBTp/2/

smilly92
  • 2,383
  • 1
  • 23
  • 43
-8

You shouldn't need to hack specificity like this... if you need to force a value, use !important.

Scotty
  • 2,480
  • 2
  • 16
  • 20
  • Thankyou for the suggestion, and I shall most likely use this, but... I still do not know the answer to my question – Georges Oates Larsen Jul 20 '12 at 02:42
  • !important must not be used lightly. You must really consider that there's really not another way around the use of specificity, etc... Only then you should use the !important. – brunoais Oct 25 '12 at 21:56
  • This comment is actually contradicting the mdn tips for avoiding headaches (so please don't use `!important` unless there isn't another decent solution) like described here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#tips_for_handling_specificity_headaches – Berci Jul 13 '22 at 13:27