I have a parent div with nested child divs that I want to style using one class. The challenge is getting the styles to apply correctly to specific child divs.
<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>
The goal is to style the background color and other properties of the smaller div containing the icon. However, attempts to target it using CSS selectors have not been successful.
.aa-prime > div:nth-child(2) {
and
.aa-prime div:nth-child(2) {
do not apply the desired styles to the left-hand div with the icon (such as background color and rounded 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;
}