Help needed with understaning inheritance

If I remove the a element as a selector and keep only the class selector the color does not get inherited to the a element. Does that mean that the a element cannot inherit and I need to target him specifely to apply a propert? If someone could help with the question I would be gratefull. TY

    <li>Default <a href="#">link</a> color</li>
    <li class="my-class-1">Inherit the <a href="#">link</a> color</li>
    <li class="my-class-2">Reset the <a href="#">link</a> color</li>
    <li class="my-class-3">Unset the <a href="#">link</a> color</li>
</ul>
body {
    color: green;
}
     
.my-class-1 a {
    color: inherit;
    
}
          
.my-class-2 a {
    color: initial;
}
          
.my-class-3 a {
    color: unset;
}

Hello @brusli

if i got you right you mean when you use

.my-class-2 {
    color: initial;
}

this way you target the class which is the li item
one thing to noting about css atterbuite that each one has default value some inhirit by default other use default color like blue for a element

so check this https://developer.mozilla.org/en-US/docs/Web/CSS/color#formal_definition
and you will notice that the default/initiail value is canvastext which make your p element color in black by default and link in blue and so on

hope that help and have a nice day :slight_smile:

2 Likes