How does CSS specificity decide which styles to apply?

by

It’s based on IDs, classes and tags. IDs have the highest specificity, then classes then tags, so:

.item a     == 0 1 1      0 (id) 1 (class=item) 1 (tag=a)
.special    == 0 1 0
#foo        == 1 0 0
#foo .bar a == 1 1 1
#foo #bar   == 2 0 0

whichever has the most wins 🙂 If it’s a tie, whichever one comes last in the document wins. Note that 1 0 0 beats 0 1000 1000

If you want .special to apply, make it more specific: .item a.special

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. CSS class repetition to increase specificity
  6. how do I make device specific selectors in css [closed]
  7. Is there a “previous sibling” selector?
  8. What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
  9. CSS selector for first element with class
  10. What does the “+” (plus sign) CSS selector mean?
  11. Is there a CSS selector by class prefix?
  12. How do I select an element based on the state of another element in the page with CSS?
  13. Does the order of classes listed on an item affect the CSS?
  14. Specificity of inherited CSS properties
  15. Select all child elements recursively in CSS
  16. CSS “and” and “or”
  17. Using the last-child selector
  18. Why doesn’t the selector h3:nth-child(1):contains(‘a’) work?
  19. Can I have multiple :before pseudo-elements for the same element?
  20. Are parentheses allowed in CSS selectors?
  21. The use of /deep/ and >>> in Angular 2
  22. Select nth-child across multiple parents
  23. Combining :not() selectors in CSS
  24. Select an element with empty class attribute (class=””) using CSS?
  25. How do I target elements with an attribute that has any value in CSS?
  26. CSS select the first child from elements with particular attribute
  27. Can you target an element with CSS only if 2 classes are present?
  28. nth-child for every two table rows
  29. nth-child doesn’t respond to class selector [duplicate]
  30. Why are my CSS properties being overridden/ignored?

Leave a Comment