CSS not inheriting parent class properties - html

Question

I have the following HTML
<div id="borderContainer" class="scViewer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false">
<div id="buttonPagerContentPane" data-dojo-type="dijit/layout/ContentPane" align="center" data-dojo-props="region:'bottom'" class="buttonContentPane">
<div id="buttonPagerTitle" class="ContentPaneTitle">
Sheet Selector <br>
</div>
<button data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-point="PreviousButtonAttachNode" id="previousButton" class="scViewButtonContent buttonContentPane">
Previous
</button>
<button data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-point="NextButtonAttachNode" id="nextButton" class="scViewButtonContent">
Next
</button>
</div>
</div>
And the following CSS:
.scViewer {
color: #2546ff;
}
.scViewer .buttonContentPane {
padding: 5px 5px;
color:#FFFFFF;
border-radius: 5px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.scViewer .ContentPaneTitle{
color: #2546ff;
font-weight: bold;
}
.scViewer .buttonContentPane .scViewButtonContent{
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
text-decoration: none;
}
My problem is that the two previous/next buttons don't inherit the buttonContentPane class without explicitly defining it again, even though it is within the parent buttonPagerTitle <div> ..To demonstrate this above, I explicitly define the nextButton without the buttonContentPane property, and the resultant HTML in the dev tools does not contain the buttonContentPane in the defined, but the inherited section contains buttonContentPane with its properties grayed out:
My overall goal is to boilerplate CSS code for re-use within my organization. Is my syntax wrong? Did I structure the selectors improperly? Thank you for your time

Answer 1

I assume you want your 'next' and 'previous' buttons to inherit these properties:
.scViewer .buttonContentPane {
padding: 5px 5px;
color:#FFFFFF;
border-radius: 5px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
Unfortunately (for you), not all properties are inherited by an element's children/descendants, and not all elements will inherit from their parents/ancestors. You're experiencing both problems.
Padding, border-radius, and box-shadow aren't automatically inherited: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
Color usually is inherited but buttons are form elements, and form elements don't inherit properties from their parents: Why are CSS-styles not inherited by HTML form fields?
You'll need to either directly add the class to the buttons if you want them to be styled correctly (as you mentioned you did in your question), or you'll need to write rules in your CSS that explicitly state the buttons should inherit properties from their parents.
The following is a simple example showing how to explicitly tell an element to inherit properties from its parent. Click "Run code snippet" to see the resulting buttons.
.wrapper1,
.wrapper2 {
color:red;
padding: 20px;
box-shadow: 0 0 3px rgba(0,0,0,0.4);
border-radius: 10px;
margin: 10px;
width: 100px;
}
.wrapper2 button {
color: inherit;
padding: inherit;
box-shadow: inherit;
border-radius: inherit;
border: none;
}
<div class="wrapper1">
This button doesn't inherit.
<button>My button</button>
</div>
<div class="wrapper2">
This button does inherit.
<button>My button</button>
</div>