Why doesn’t my child element inherit color from its parent when parent has more specific selector?

by

See: w3c: 6 Assigning property values, Cascading, and Inheritance – 6.2 Inheritance

An inherited value takes effect for an element only if no other style declaration has been applied directly to the element.

This style applies to an element with id="my_id":

#my_id {
    color: red;
}

… and will apply (inherit) to an element nested within having class="my_class" only if its color property is otherwise unspecified.

…which no longer is the case once you declare:

.my_class {
    color: blue;
}

More Related Contents:

  1. How are the points in CSS specificity calculated
  2. Which CSS properties are inherited?
  3. Specificity of inherited CSS properties
  4. When will an tag not inherit color attribute of parent tag?
  5. Relationship between !important and CSS specificity
  6. CSS specificity, Media Queries and min-width
  7. Can type selectors be repeated to increase specificity?
  8. CSS Specificity and Inheritance
  9. CSS specificity or inheritance?
  10. CSS class repetition to increase specificity
  11. How does CSS specificity decide which styles to apply?
  12. how do I make device specific selectors in css [closed]
  13. Canvas is stretched when using CSS but normal with “width” / “height” properties
  14. Override body style for content in an iframe
  15. How to prevent Less from trying to compile CSS calc() properties?
  16. Vertically align text within a div [duplicate]
  17. How can I align one item right with flexbox?
  18. CSS “and” and “or”
  19. CSS 3d transform doesn’t work if perspective is set in the end of property
  20. How can I make generated content selectable?
  21. Flexible box model – display : flex, box, flexbox? [duplicate]
  22. Firefox ignores padding when using overflow:scroll
  23. Twitter Bootstrap 3 – Panels of Equal Height in a Fluid Row
  24. Best replacement for font tag in html
  25. Style lower and upper fill in HTML5 range input
  26. how to set background image in submit button?
  27. How is “grid-template-rows: auto auto 1fr auto” interpreted?
  28. Is it possible to create inline pseudo styles? [duplicate]
  29. Ellipsis in flexbox container [duplicate]
  30. CSS Double Border with outer border thicker than inner border

Leave a Comment