What is the order of precedence for CSS?

by

There are several rules ( applied in this order ) :

  1. inline css ( html style attribute ) overrides css rules in style tag and css file
  2. a more specific selector takes precedence over a less specific one
  3. rules that appear later in the code override earlier rules if both have the same specificity.
  4. A css rule with !important always takes precedence.

In your case its rule 3 that applies.

Specificity for single selectors from highest to lowest:

  • ids (example: #main selects <div id="main">)
  • classes (ex.: .myclass), attribute selectors (ex.: [href=^https:]) and pseudo-classes (ex.: :hover)
  • elements (ex.: div) and pseudo-elements (ex.: ::before)

To compare the specificity of two combined selectors, compare the number of occurences of single selectors of each of the specificity groups above.

Example: compare #nav ul li a:hover to #nav ul li.active a::after

  • count the number of id selectors: there is one for each (#nav)
  • count the number of class selectors: there is one for each (:hover and .active)
  • count the number of element selectors: there are 3 (ul li a) for the first and 4 for the second (ul li a ::after), thus the second combined selector is more specific.

A good article about css selector specificity.

More Related Contents:

  1. Menu does not align correctly in Safari
  2. how to align the image to the center? [closed]
  3. Proper use of flex properties when nesting flex containers
  4. My inline-block elements are not lining up properly
  5. How can I override Bootstrap CSS styles?
  6. CSS negation pseudo-class :not() for parent/ancestor elements
  7. Flexbox: 4 items per row
  8. Absolutely positioned flex item is not removed from the normal flow in IE11
  9. Why does height: 100% on a child element not apply when the parent element has a min-height/max-height value but no height value?
  10. Font Awesome icon in select option
  11. Making a div vertically scrollable using CSS
  12. Grid areas not laying out properly in CSS Grid
  13. Centering a div block without the width
  14. How can I print background images in FF or IE?
  15. CSS :first-letter not working
  16. Multiple Spaces Between Words in HTML without  
  17. Margin while printing html page
  18. CSS Transition – eases in but doesn’t ease out?
  19. CSS image resize percentage of itself?
  20. Is it possible to display an .html document , or .html fragment at CSS content?
  21. How to add button inside input [closed]
  22. Fixed Header, Footer, and Sidebars with scrolling content area in center
  23. Specifying Tab-Width?
  24. Is there a way to tell browsers to honor the jpeg exif orientation?
  25. what does -webkit-transform: translate3d(0,0,0); exactly do? Apply to body?
  26. How to center an iframe horizontally?
  27. How to center buttons in Twitter Bootstrap 3?
  28. The css padding is not working in outlook
  29. Table vertical header?
  30. CSS/HTML: How do I change the color of the check mark within the checkbox input? [duplicate]

Leave a Comment