0

Okay so as the title says I've been trying to use the inherit keyword with the h1's that have the class called "special" but it doesn't work as long as I decide to use id's on them. Can anyone please explain me why?

<div class="container">
    <h1>Just a text wrapped inside heading-1 tag</h1>
    <h1 class="special">Just a text wrapped inside heading-1 tag</h1>
    <h1>Just a text wrapped inside heading-1 tag</h1>
    <h1>Just a text wrapped inside heading-1 tag</h1>
    <h1 class="special">Just a text wrapped inside heading-1 tag</h1>
</div>

Below is the styling

  <style>
    .container {
      color: blue;
    }

    .container h1{
      color: green;
    }
    .special {
      color: inherit;
    }
  </style>
ansme
  • 413
  • 2
  • 11
  • 1
    `.container h1` (class selector plus type selector) is more specific than `.special` (just a class selector) so overrides it. – Quentin Jan 18 '21 at 10:43
  • 1
    As the comment from @Quentin it works with class selector but you've overwrite the style. – Molham Al Nasr Jan 18 '21 at 10:45
  • 1
    See here how the inherit works https://stackoverflow.com/questions/65763644/cant-understand-from-where-a-tag-inherits-black-color/65764196#65764196 – Badal S Jan 18 '21 at 11:05
  • @Quentin Thanks! doing it like this `.container .special` worked! – ansme Jan 19 '21 at 11:38

0 Answers0