I have the following HTML snippet and I want to target the second child with the class name "embed":
<div class="embed-container">test</div>
This is what I tried:
.feature-row .threecolumns .caption:nth-child(2) {
border: 1px solid red;
}
<div class="col-md-12 relative feature-row" >
<div class="threecolumns">
<div class="caption caption-feature-block relative" >
<div class="col-md-12 col-xs-12">
<h4 >The Heart </h4>
<p >We asked ?"</p>
<div class="embed-container"></div>
</div>
</div>
<div class="caption caption-feature-block relative " >
<div class="col-md-12 col-xs-12">
<h4 >See You Tomorrow</h4>
<p > takes top priority at A.</p>
<div class="embed-container">test</div>
</div>
</div>
<div class="caption caption-feature-block relative c" >
<div class="col-md-12 col-xs-12">
<h4 >h4</h4>
<p > A .</p>
<div class="embed-container">embed2</div>
</div>
</div>
</div>
</div>
Is there a way to achieve this without assigning an ID to the div?