CSS styling the 2nd nested div inside of a parent div-CodePudding

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.

<div class='aa-callout aa-prime'>
  <div class='row p-1 h-100'>
    <div class='col-1 d-flex align-items-center'>
      <i class="fal fa-exclamation-circle fa-3x text-white mx-auto"></i>
    </div>  
    <div class='col-11'>
      <h4>Blue is for information</h4>
      <p>Sed ut perspiciatis unde.</p>
    </div>
  </div>  
</div>

I need to get the div containing the <i default s-code-block">.aa-prime > div:nth-child(2) {

and

.aa-prime div:nth-child(2) {

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)

.aa-callout {
  max-width:100%;
  flex: 0 0 100%;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  padding-left:15px;
  padding-right:15px;
}
.aa-prime > div:nth-child(2) {
  background-color: #036A96!important;
}
.aa-prime h4 {
  color:#036A96!important;
}

CodePudding user response：

If that structure is fixed (i.e. non-dynamic), you can use this selector:

.aa-prime > div:first-child > div:first-child { ...

(Note: :nth-child(2) won't work because the second div is a child of the first div)