CSS class repetition to increase specificity

by

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

More Related Contents:

  1. How are the points in CSS specificity calculated
  2. Can type selectors be repeated to increase specificity?
  3. CSS Specificity and Inheritance
  4. CSS specificity or inheritance?
  5. How does CSS specificity decide which styles to apply?
  6. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  7. What do commas and spaces in multiple classes mean in CSS?
  8. CSS ‘>’ selector; what is it? [duplicate]
  9. nth-child doesn’t respond to class [duplicate]
  10. Select element based on multiple classes
  11. CSS attribute selectors: The rules on quotes (“, ‘ or none?)
  12. Should I avoid using !important in CSS?
  13. CSS: How to say .class:last-of-type [classes, not elements!] [duplicate]
  14. How to write a CSS hack for IE 11? [duplicate]
  15. :not() selector not behaving the same between Safari and Chrome/Firefox
  16. What is the difference between ‘>’ and a space in CSS selectors?
  17. Invalid CSS selector causes rule to be dropped: What is the rationale?
  18. Style child element when hover on parent
  19. How to select the first, second, or third element with a given class name?
  20. Why can’t you group descendants in a CSS selector?
  21. Combine :after with :hover
  22. What does the dot mean in CSS?
  23. Not CSS selectors
  24. :active css selector not working for IE8 and IE9
  25. What is this CSS selector? [class*=”span”]
  26. Is there any pros and cons if i use always CSS Class instead CSS ID for everything?
  27. Multiple descendant children selector with css [duplicate]
  28. How do I give a CSS class priority over an id?
  29. Select odd even child excluding the hidden child
  30. Comma in CSS, multiple selectors using the same CSS

Leave a Comment