CSS: Can I overwrite child-class with parent-class?

Question

I would like to know if I can overwrite child-class styles with parent-class styles. This is my code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .red {
        color: red;
      }

      .blue {
        color: blue;
      }

      .parent {
        border: 2px solid chocolate;

        /*this does not work*/
        color: green;
        color: green !important;
      }

      /*this also does not work*/
      body .parent {
        color: green;
      }
    </style>
  </head>
  <body>
    <button class="parent">
      <span class="red">H</span>
      <span class="blue">i</span>
    </button>
  </body>
</html>

I have found a similar question here. But that is not what I have in my mind.

[https://stackoverflow.com/questions/73121465/override-child-class-css-with-parent-class-css][1]

hi you have to try this .parent > * { color: green !important; } if you just want to apply it to span apply like this .parent > span { color: green !important; } — il4mb, Aug 26 '22 at 07:56
To strictly answer the question: you can't (unless you slightly change the selector as suggested above) — Diego D, Aug 26 '22 at 08:01
You could define a stronger CSS selector ```span.red { color: inherit;}```. That would work. — knospe, Aug 26 '22 at 09:49
You set the same color green for the same parent 3 times, what exactly do you want to overwrite? if you mean you want to change the child style using parent class, then you should use parent:nth-child(n) — Mad7Dragon, Aug 30 '22 at 10:25

score 1 · Answer 1 · answered Aug 26 '22 at 08:38

No.

If an element has a color of its own, then nothing about the color of its parent element can change that.

It will only take on the colour of the parent element if it has color: inherit.

If you want to change the colour of the elements with class="red" or class="blue" then you need a selector that selects those elements.

knospe · Answer 2 · 2022-08-30T09:58:09.363

In your case, you could define a stronger CSS selector span.red { color: inherit;}. That would work.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .red {
        color: red;
      }

      .blue {
        color: blue;
      }

      .parent {
        border: 2px solid chocolate;
        color: green;
      }

      .parent span.red,
      .parent span.blue {
        color: inherit;
      }
    </style>
  </head>
  <body>
    <button class="parent">
      <span class="red">H</span>
      <span class="blue">i</span>
    </button>
  </body>
</html>

Choose Goose · Answer 3 · 2022-08-26T08:57:18.330

-1

You can specify a child element:

.parent > *

Or refer to the tag

.parent span

Or you can set child color and it takes parent value:

color: inherit;

Or you can remove the color from your child element at all, so that it will take a parent color.

edited Aug 26 '22 at 08:57

answered Aug 26 '22 at 08:27

Choose Goose

99
5

CSS: Can I overwrite child-class with parent-class?

3 Answers3