CSS class repetition to increase specificity

Question

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)
{
}

?

Watchmaker

I'll take a guess that this is going to be browser-specific. – Stablish

Answer 1

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

Syllabub

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

Isn't a common practice to specify CSS specificity with 4 numbers? (inline styles, IDs, Classes, Elements, i.e. x.x.x.x) – Purgatory

@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. – Syllabub

Answer 2

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

Catholic

Thankyou! :) What browser did you use out of curiosity? Works here on safari, going to test firefox – Watchmaker

I tested in the latest version of Chrome, Firefox, Safari and IE. Got the same results for each. – Catholic

This behavior is intended and required of browsers. See my answer for a reference. – Syllabub

Answer 3

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

Diffluent

Thankyou for the suggestion, and I shall most likely use this, but... I still do not know the answer to my question – Watchmaker

!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. – Meunier

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: developer.mozilla.org/en-US/docs/Web/CSS/… – Hochstetler