CSS button color can't be override by parent

Question

Consider the following HTML and CSS codes:

<div class="red"> <button>Should be red</button> </div> 

.red { color : red!important; } 

I can't figure out why the button text is not red, and I also don't know how to let the parent override the button's color

Answer 1

The button has an explicit color defined by the browser's stylesheet. You can change the button's color to inherit, and then it would get the color from the parent:

button { color: inherit; } .red { color: red; }

<div class="red"> <button>Should be red</button> </div>