CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Richa
Richa

Reputation: 3289

Apply CSS on particular <a> in a div

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. :)

Upvotes: 6

Views: 1917

Answers (6)

Milind Anantwar
Milind Anantwar

Reputation: 82241

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

Upvotes: 8

Dr M L M J
Dr M L M J

Reputation: 2397

U can try -

             <a href="#"  id="A" style="margin: 10px 20px 10px 20px; text-decoration: none; display: inline-block;">A</a>
             <a href="#"  id="B" style="margin: 10px 20px 10px 20px; text-decoration: none; display: inline-block;">B</a> 

             <a href="#"  id="C" style="different attributes which u want">C</a>

Upvotes: 0

Yuriy Bondarenko
Yuriy Bondarenko

Reputation: 91

if you have to set css to some items use this code

$(document).ready(function() {
    var iterations = 0;
    var countOfItems = 2; // how many <a> you need to change
    $('div#contain').find('a').each(function(){
        $(this).css({ "margin":"10px 20px 10px 20px", "text-decoration":"none" , "display":"inline-block"});
        iterations ++;
        if(iterations == countOfItems)
            return false;
    });
});

Upvotes: 1

Karlen Kishmiryan
Karlen Kishmiryan

Reputation: 7522

Just use ID selector:

#A { ... }

UPDATE:

You can use nth-child() of CSS3 like this:

#contain a:nth-child(number)
{
   css declarations;
}

Where the number is the index of element.

For more info about nth-child() please refer here.

Upvotes: 0

Helpful
Helpful

Reputation: 706

You can use CSS classes, like so:

<div id="contain">
                    <div style="margin-top:15px;margin-bottom:15px;"> 
                    <a href="#"  id="A" class="specialLink">A</a>
                    <a href="#"  id="B" class="specialLink">B</a> 
                    <a href="#"  id="C">C</a>
         </div>           
</div>

Then, in your CSS, you do:

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

The ".specialLink" part makes it so only elements with that class get that styling.

Upvotes: 3

sshet
sshet

Reputation: 1160

The first line will apply css to first two a and last to last a tag

$('#contain').find('a').css('some property');
$('#contain').find('a:last').css('some property');

Upvotes: 1

Related Questions