Не работает nth-child CSS

Question

Не работает nth-child =( По идее при ховере на трёх блоках должно быть три разных цвета левой границы, а у меня при ховере везде вылезает красный цвет. Почему так?

 .Latest_News_Link_Block_1 a:hover:nth-child(1){
border-left: 4vw solid red; 
}

.Latest_News_Link_Block_1 a:hover:nth-child(2){
border-left: 4vw solid gold; 
}

.Latest_News_Link_Block_1 a:hover:nth-child(3){
border-left: 4vw solid blue; 
}

.Latest_News_Block{
margin-top:1.5vw;   
padding-top:1vw;
border-top: 2px solid rgba(221, 221, 221, 1);
}
.Latest_News_Title{
font-size:20px;
font-family:arial;
text-align:center;  
color:black;
}
.Latest_News_Link_Block_1{
margin-top:20px;
margin-left:0.5vw;
width:92%;
}
.Latest_News_Link_1{
padding:0.5vw;
font-size:16px;
font-family:arial;
margin-left:1vw;
color:black;
display: block;
border-radius: 0.5vw;
box-shadow: 2px -2px 5px 0 rgba(0,0,0,.1),
-2px -2px 5px 0 rgba(0,0,0,.1),
2px 2px 5px 0 rgba(0,0,0,.1),
-2px 2px 5px 0 rgba(0,0,0,.1);
}

<article class ="Latest_News_Block">

<h1 class ="Latest_News_Title" >СПИСОК</h1>

<ul class="xopas">

 <li class="Latest_News_Link_Block_1" > <a class ="Latest_News_Link_1" href="/">Озеро</a></li>
 <li class="Latest_News_Link_Block_1" > <a class ="Latest_News_Link_1" href="/">Древо</a></li>
 <li class="Latest_News_Link_Block_1" > <a class ="Latest_News_Link_1" href="/">Домик</a></li>

</ul>

</article>

Answer 1

Тег a всегда под номером 1, поэтому цвет получается всегда красный. Но вот по Latest_News_Link_Block_1 уже есть смысл использовать nth-child.

.Latest_News_Link_Block_1:nth-child(1) a:hover {
  border-left: 4vw solid red;
}

.Latest_News_Link_Block_1:nth-child(2) a:hover {
  border-left: 4vw solid gold;
}

.Latest_News_Link_Block_1:nth-child(3) a:hover {
  border-left: 4vw solid blue;
}

.Latest_News_Block {
  margin-top: 1.5vw;
  padding-top: 1vw;
  border-top: 2px solid rgba(221, 221, 221, 1);
}

.Latest_News_Title {
  font-size: 20px;
  font-family: arial;
  text-align: center;
  color: black;
}

.Latest_News_Link_Block_1 {
  margin-top: 20px;
  margin-left: 0.5vw;
  width: 92%;
}

.Latest_News_Link_1 {
  padding: 0.5vw;
  font-size: 16px;
  font-family: arial;
  margin-left: 1vw;
  color: black;
  display: block;
  border-radius: 0.5vw;
  box-shadow: 2px -2px 5px 0 rgba(0, 0, 0, .1), -2px -2px 5px 0 rgba(0, 0, 0, .1), 2px 2px 5px 0 rgba(0, 0, 0, .1), -2px 2px 5px 0 rgba(0, 0, 0, .1);
}

<article class="Latest_News_Block">

  <h1 class="Latest_News_Title">СПИСОК</h1>

  <ul class="xopas">

    <li class="Latest_News_Link_Block_1"> <a class="Latest_News_Link_1" href="/">Озеро</a></li>
    <li class="Latest_News_Link_Block_1"> <a class="Latest_News_Link_1" href="/">Древо</a></li>
    <li class="Latest_News_Link_Block_1"> <a class="Latest_News_Link_1" href="/">Домик</a></li>

  </ul>

</article>

БЛОГ НА HUSL

Не работает nth-child CSS

Ответы (1 шт):