JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<h2 id="header" class="foo bar">
  <i>hello</i>
  <b>world</b>
</h2>

<p>
  It might seem with the above CSS that all the declarations within the foo rule set would have the same scope, but this is not so.
</p>
  <ul>
  <li>
  The scope of the <pre>background: green;</pre> declaration is the element with foo class, plus all of its descendents because the background property is inherited.</li>
  <li>
    The scope of the border property is the foo class, but because the
    b rule set has a declaration of <pre>border: inherit</pre> it also has the same border property value applied.
  </li>
  <li>
  The padding declaration within foo is not applied at all because it is overriden in a separate rule set. Nor do any of its descendents inherit this.
  </li>
  <li>fontsize does not apply because the element has a class bar which is targeted by the .bar rule set which appears later in the stylesheet</li>
  
</ul>

CSS

h2 {
  padding: 30px !important;
}

.foo {
  background: green;
  border: solid 1px red;
  padding: 100px;
  font-size: 50px;
}

.bar {
  font-size: 10px;
}

b {
  border: inherit;
}