How to select child element inside first, second or third html element with CSS classes?

Question

I want to select anchor tags in CSS.For the purpose in the following html document I did the same.

My html document is here:

<div class="first">
   <center><a href="http://www.google.com">The first link </a></center>
</div>

<div class="second">
   <center><a href="http://www.fb.com">The second link</a></center>
</div>

<div class="third">
   <center><a href="http://www.stackoverflow.com">The third link</a></center>
</div>

Now I want to select all of a tags. I tried in this way:

body a:first-child:hover//The first child
{
    font-size:30px;
    color:yellow;
}
body a+a:hover  //the second child
{
    font-size:40px;
    color:red;
}
body a+a+a:hover  //the third child
{
    font-size:50px;
    color:#fff;
}

But I am getting wrong result what should I do?

Answer 1

Your <a> elements are not adjacent siblings (or siblings at all), so the adjacent sibling selector (+) doesn't apply to them.

The div elements are siblings.

body div:first-child a:hover//The first child
{
    font-size:30px;
    color:yellow;
}
body  div+div a:hover  //the second child
{
    font-size:40px;
    color:red;
}
body div+div+div a:hover  //the third child
{
    font-size:50px;
    color:#fff;
}

You aren't using, and don't need to use, classes for this.

Answer 2

You can easily select like this :

.first a:first-child:hover//The first child
{
    font-size:30px;
    color:yellow;
}
.second a:nth-child(2):hover  //the second child
{
    font-size:40px;
    color:red;
}
.third a:nth-child(3):hover  //the third child
{
    font-size:50px;
    color:#fff;
}

For modern browsers, use a:nth-child(2) for the second a, and a:nth-child(3) for the third.

Hope this helped.