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

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 >
      <span >H</span>
      <span >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]

CodePudding user response：

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 or then you need a selector that selects those elements.

CodePudding user response：

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 >
      <span >H</span>
      <span >i</span>
    </button>
  </body>
</html>

CodePudding user response：

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.