CSS Specificity and Inheritance

by

The .container rule doesn’t match the p element. So specificity is irrelevant here. Inheritance and specificity are separate concepts and the only time they interact is when more specific/less specific rules contain declarations with inherit. That is not the case here.

As far as the p element is concerned, only the * rule applies, and the * contains its own font-size declaration, and so the specified font size follows that declaration.

If the * rule didn’t have its own font-size declaration, then the p element would inherit from .container.

If you want descendants of .container to take after its font size, you will need an additional .container * rule. Be very careful with the inherit keyword when it comes to relative values, though — you probably meant to keep all descendants the same size, so 1em or 100% is more appropriate here than inherit:

* {
  font-size: 18px;
}

.container {
  font-size: 50%;
}

.container * {
  font-size: 1em;
}
<div class="container">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate explicabo fugiat laborum minus ullam? Amet delectus facilis id quam temporibus.
  </p>
</div>

More Related Contents:

  1. How are the points in CSS specificity calculated
  2. Can type selectors be repeated to increase specificity?
  3. CSS specificity or inheritance?
  4. CSS class repetition to increase specificity
  5. How does CSS specificity decide which styles to apply?
  6. Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
  7. How do I select the “last child” with a specific class name in CSS? [duplicate]
  8. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  9. How to combine class and ID in CSS selector?
  10. :first-child not working as expected
  11. What is the difference between :first-child and :first-of-type?
  12. Does CSS have a :blur selector (pseudo-class)?
  13. Specify multiple attribute selectors in CSS
  14. Should I use single or double colon notation for pseudo-elements?
  15. How to make Internet Explorer 8 to support nth child() CSS element?
  16. How to only show certain parts with CSS for Print?
  17. Why use an attribute selector to match classes?
  18. Browser support for CSS :first-child and :last-child
  19. Select nth-child across multiple parents
  20. Vertically centering content of :before/:after pseudo-elements
  21. Difference between the selectors div + p (plus) and div ~ p (tilde)
  22. Are CSS selectors case-sensitive?
  23. Can you target an element with CSS only if 2 classes are present?
  24. CSS combinator precedence?
  25. What is caret symbol ^ used for in css when selecting elements?
  26. What is the difference between p:nth-child(2) and p:nth-of-type(2)?
  27. What CSS selector can be used to select the first div within another div
  28. CSS Selector for not a child of element type?
  29. :last-child pseudo-class mixed with attribute selector not working
  30. CSS selector based on width?

Leave a Comment