HTML Son element can't rewrite its property if father element has put property onto it

user_17627011 0
Viewed 39

When I first write the first version, world is still blue. When I modify it to second version, world doesn't turn blue.

The first version use class="Class on the father element, so that son elements can all use this property. But I want to modify son element's property. It turns out that modification doesn't work as expected.

Then I tried second version. Instead of putting class="Class" on the <div> tag, I use class="Class on each son element. At this time, the modification worked.

null means color still follows original set property in css file.

unset means clear this property value and set it to default value.

CSS file as follows:

.Class {
    color: blue;
}

HTML:

first version

<div class="Class">
    <h1>hello</h1>
    <h1 id="hello">hello</h1>
    <h1 id="world">world</h1>
    <script>
        let hello = document.querySelector("#hello");
        let world = document.querySelector("#world");
        hello.style.color = null;
        world.style.color = "unset";
    </script>
</div>

second version

<div>
    <h1 class="Class">hello</h1>
    <h1 id="hello" class="Class">hello</h1>
    <h1 id="world" class="Class">world</h1>
    <script>
        let hello = document.querySelector("#hello");
        let world = document.querySelector("#world");
        hello.style.color = null;
        world.style.color = "unset";
    </script>
</div>

For the sake of convenience, we usually choose the first version, because it doesn't need to add class="Class" on every son element tag. However, it will cause the problem mentioned above. Why the problem arises? And is there other way to still use class="Class" on the father element, and can change son element's property.

css html javascript
2 Answers

The second version can be modified as following in order to have the text colour on world as blue:

<div>
    <h1 class="Class">hello</h1>
    <h1 id="hello" class="Class">hello</h1>
    <h1 id="world" class="Class">world</h1>
    <script>
        let hello = document.querySelector("#hello");
        let world = document.querySelector("#world");
        hello.style.color = null;
    </script>
</div>

Setting world.style.color = "unset"; in first case was setting #world element colour to the inherited color value from parent, which was blue.

The initial value for color property is expected to be black, which is what setting color to unset in the second case would apply.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/unset

user_114521340

use the keyword initial instead of unset to achieve what you want.

        let hello = document.querySelector("#hello");
        let world = document.querySelector("#world");
        hello.style.color = null;
        world.style.color = "initial";
.Class{
  color:blue;
  }
<div class="Class">
    <h1>hello</h1>
    <h1 id="hello">hello</h1>
    <h1 id="world">world</h1>
</div>

user_107497260
Related