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>

more