Apply CSS on particular <a> in a div

Question

So i have following div in HTML. Now I was wondering is there a way to apply CSS to just first 2 <a> and different Css on 3rd <a>

<div id="contain">
    <div> 
        <a href="#" id="A">A</a>
        <a href="#" id="B">B</a>
        <a href="#" id="C">C</a>
    </div>
</div>

CSS:

#contain a {
    margin: 10px 20px 10px 20px;
    text-decoration: none;
    display: inline-block;
}

I want to apply above Css to only first 2 <a> in Div.

Thanks for help. :)

Answer 1

You should use nth-child() to target the first two elements...

#contain a:nth-child(-n+2){
    margin: 10px 20px 10px 20px;
    text-decoration: none;
    display: inline-block;
}

Demo

Update: using :nth-of-type()

 #contain a:nth-of-type(-n+2){
    margin: 10px 20px 10px 20px;
    text-decoration: none;
    display: inline-block;
    color:red;
 }

Demo