title: CSS styling the 2nd nested div inside of a parent div
body: <p>I have some nested divs to use as an alert box.  I'd like to use one class on the parent div to drive the styles for the divs inside of that.</p>
  <pre><code>&lt;div class='aa-callout aa-prime'&gt;
    &lt;div class='row p-1 h-100'&gt;
      &lt;div class='col-1 d-flex align-items-center'&gt;
        &lt;i class=&quot;fal fa-exclamation-circle fa-3x text-white mx-auto&quot;&gt;&lt;/i&gt;
      &lt;/div&gt;  
      &lt;div class='col-11'&gt;
        &lt;h4&gt;Blue is for information&lt;/h4&gt;
        &lt;p&gt;Sed ut perspiciatis unde.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  <p>I need to get the div containing the &lt;i class=&quot; section to have a background color and some other styles.  I've tried</p>
  <pre><code>.aa-prime &gt; div:nth-child(2) {
  </code></pre>
  <p>and</p>
  <pre><code>.aa-prime div:nth-child(2) {
  </code></pre>
  <p>but neither applies the styles to the smaller div on the left with the fa-icon in it (namely background color and rounding of the left edges)</p>
  <pre><code>.aa-callout {
    max-width:100%;
    flex: 0 0 100%;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding-left:15px;
    padding-right:15px;
  }
  .aa-prime &gt; div:nth-child(2) {
    background-color: #036A96!important;
  }
  .aa-prime h4 {
    color:#036A96!important;
  }
  </code></pre>