CSS not inheriting parent class properties

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

are they underneath a class="scViewer" somewhere? since you've only posted a picture of the rest of the code, you've made impossible for us to `ctrl-f` to find out if they are. general tip: pictures of code are absolutely useless. — Marc B, Sep 16 '16 at 16:58
@MarcB Yes it is declared as a root div, I excluded it originally but it is there (see edit). The picture is just to demonstrate that the class is indeed not defined in dev tools. — Rice, Sep 16 '16 at 17:58
As far as I thought in CSS properties aren't inherited by child elements. So the .scViewer .buttonContentPane is only going to affect the elements with the class .buttonContentPane. Explicitly defining the buttons with .scViewer .buttonContentPane .scViewButtonContent is one options to give it the style you want, or you can try .scViewer .buttonContentPane, .scViewer .buttonContentPane button using a comma so you don't have to write the same code twice. EDIT: only specific CSS styles can be inherited by a child from a parent (font-family, text-alignment, etc.) — Benneb10, Sep 16 '16 at 18:02
@Benneb10 What are these certain CSS inheritable elements, are they defined in a specification somewhere? Also, I'm not quite clear what you mean with the comma approach — Rice, Sep 16 '16 at 18:09
@Rice sorry I haven't responded, if you're still interested here is a stackOverflow that lists inherited CSS properties http://stackoverflow.com/questions/5612302/which-css-properties-are-inherited — Benneb10, Sep 19 '16 at 14:19

score 2 · Accepted Answer · edited May 23 '17 at 12:16

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>

This was super helpful and solved my problem. I used the 'inherit' for properties needed inside of scViewButtonContent inheriting from buttonContentPane, and the properties worked just as in your example. Thanks again! — Rice, Sep 16 '16 at 21:39

CSS not inheriting parent class properties

1 Answers1