Understanding CSS selector priority / specificity

by

I’ll just toss in a link to the CSS 2.1 spec itself, and how browsers are supposed to calculate specificity:

CSS 2.1 Section 6.4.3:

A selector’s specificity is calculated as follows:

  • count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
  • count the number of ID attributes in the selector (= b)
  • count the number of other attributes and pseudo-classes in the selector (= c)
  • count the number of element names and pseudo-elements in the selector (= d)
  • The specificity is based only on the form of the selector. In particular, a selector of the form “[id=p33]” is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an “ID” in the source document’s DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

If the specificities are equal, then CSS 2.1 Section 6.4.1 comes into play:

  1. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

Note that this is talking about when the style is defined, not when it is used. If classes .a and .b have equal specificity, whichever is defined last in the stylesheet(s) wins. <p class="a b">...</p> and <p class="b a">...</p> will be styled identically, based on the definition order of .a and .b.

More Related Contents:

  1. CSS negation pseudo-class :not() for parent/ancestor elements
  2. How can I select the last element with a specific class, not last child inside of parent?
  3. Are class names in CSS selectors case sensitive?
  4. Why doesn’t table > tr > td work when using the child selector?
  5. Matching the first/nth element of a certain type in the entire document
  6. Using CSS :before and :after pseudo-elements with inline CSS?
  7. How can I correctly select the first or the last child with CSS?
  8. Using :before and :after CSS selector to insert HTML [duplicate]
  9. :nth-child(even/odd) selector with class [duplicate]
  10. How to CSS: select element based on inner HTML [duplicate]
  11. What is the performance impact of the universal selector?
  12. What are the priorities among CSS selectors
  13. Why is nth-child selector not working?
  14. CSS selector with period in ID
  15. Can a ::before selector be used with a ?
  16. Avoiding repeated constants in CSS
  17. What is the ::content/::slotted pseudo-element and how does it work?
  18. CSS Selector “(A or B) and C”?
  19. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  20. How to get CSS to select ID that begins with a string (not in Javascript)?
  21. How do I select an element that has a certain class?
  22. Selecting the last element among various nested containers
  23. Zebra striping a flexbox table with wrapping items
  24. CSS attribute selector does not work a href
  25. How to use nth-child for styling with a table with rowspan?
  26. CSS Selector for No-Children-But-Not-Empty
  27. Is there a CSS not equals selector?
  28. How can I select elements in CSS by partial ID value?
  29. How can I get a specific number child using CSS?
  30. Why does .class:last-of-type not work as I expect?

Leave a Comment