All geek questions in one place

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

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

My html document is here:                        

    </head>
    <body>
        <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>      
    </body>

Now I want to select all the tags. I tried 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 get the wrong result, what should I do?

+4
source share
7 answers

Elements <a>are not siblings at all, so the adjacent selector ( +) does not apply to them.

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 do not and should not use classes for this.

+4
source

You can easily choose the following:

.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;
}

a:nth-child(2) , a:nth-child(3) .

, .

+4
.first{
font-size:30px;
color:yellow;
}
.first a:hover{
    font-size:40px;
    color:red;
}
 .second a:hover{
font-size:40px;
color:red;
}
.third a:hover{
    font-size:50px;
    color:#fff;
}
+3

- , :nth-child(n) -selector (. this refrence.)

body before ( , a). , .

, , :

.first a:hover
{
    font-size:30px;
    color:yellow;
}    
.second a:hover
{
    font-size:40px;
    color:red;
}
.third a:hover
{
    font-size:50px;
    color:#fff;
}
+1
body a {
//your rules here
}

.

0

:

a {
    color: pink;
}

To set styles for guidance and visits:

a:focus,
a:hover {
    color: green;
}

a:visited {
    color: blue;
}

Also, it seems you need to learn basic CSS. I suggest a “CSS Diner” at http://flukeout.imtqy.com/ , which can be a good exercise.

0
source

use link with elements div class

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

Source: https://habr.com/ru/post/1535001/

More articles:


All Articles