What are the priorities among CSS selectors

by

The gory details in the spec are actually reasonably readable. In summary:

  1. !important rules and inline style rules win most.

  2. Otherwise, normally the more specific wins. #id is a more specific selector than .classname is a more specific selector than tagname.

  3. Where rules are equally specific, the one declared last wins.

There is no particular reason why this ‘shouldn’t happen’. It’s normal to specify a broad-brush rule and then add a more specific rule to target one case; multiple same-property rules on a single element are not unusual or undesirable.

More Related Contents:

  1. Understanding CSS selector priority / specificity
  2. CSS Pseudo-classes with inline styles
  3. How can I select the last element with a specific class, not last child inside of parent?
  4. Are class names in CSS selectors case sensitive?
  5. Why doesn’t table > tr > td work when using the child selector?
  6. CSS selector by inline style attribute
  7. :last-child not working as expected?
  8. Using CSS :before and :after pseudo-elements with inline CSS?
  9. Using :before and :after CSS selector to insert HTML [duplicate]
  10. :nth-child(even/odd) selector with class [duplicate]
  11. How to CSS: select element based on inner HTML [duplicate]
  12. What is the performance impact of the universal selector?
  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. Is there a reason to use a instead of a:link or a:visited in my stylesheet?
  24. Zebra striping a flexbox table with wrapping items
  25. CSS attribute selector does not work a href
  26. How to use nth-child for styling with a table with rowspan?
  27. CSS Selector for No-Children-But-Not-Empty
  28. How to select classes with spaces
  29. CSS nth-match doesn’t work
  30. Targeting text nodes with CSS

Leave a Comment