How To Select Child Element Inside First, Second Or Third Html Element With Css Classes?

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:

The div elements are siblings.

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

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

Solution 2:

You can easily select like this :

.firsta:first-child:hover//The first child
{
    font-size:30px;
    color:yellow;
}
.seconda:nth-child(2):hover//the second child
{
    font-size:40px;
    color:red;
}
.thirda: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.

Solution 3:

.first{
font-size:30px;
color:yellow;
}
.firsta:hover{
    font-size:40px;
    color:red;
}
 .seconda:hover{
font-size:40px;
color:red;
}
.thirda:hover{
    font-size:50px;
    color:#fff;
}

Solution 4:

You don't really need any classes for this, you can just use the :nth-child(n)-selector for this (see this for refrence.)

Also there is no need to use the body selector before (to declare that the body is a parent-element of the a). The body is the parent-element of every visible element of the page, so adding this into the selector hierarchy doesn't make much sense.

However if you want to use your already existing classes, you can do the following:

.firsta:hover
{
    font-size:30px;
    color:yellow;
}    
.seconda:hover
{
    font-size:40px;
    color:red;
}
.thirda:hover
{
    font-size:50px;
    color:#fff;
}

Solution 5:

bodya {
//your rules here
}

This will select all anchor tags in your site.

Share