I am trying to target the first occurrence of .discount class but some how its not working. I am trying .discount:first-child but its targeting all the .discount class inside the .container class.
Any one has idea how can I target only the first .discount class element inside the .container element?
My HTML code looks like this
<div class="container">
<div class="wrapper">
<div class="some-class">
Product
</div>
<div class="some-class">
Discount
</div>
</div>
<div class="wrapper">
<div class="product">
Product 1
</div>
<div class="discount">
$1
</div>
</div>
<div class="wrapper">
<div class="product">
Product 2
</div>
<div class="discount">
$5
</div>
</div>
<div class="wrapper">
<div class="product">
Product 4
</div>
<div class="discount">
$10
</div>
</div>
</div>
why you dont put another class inside the div you want. like this http://jsfiddle.net/8L0un657/
<div class="wrapper">
<div class="product">
Product 1
</div>
<div class="discount selected">
$1
</div>
</div>