Не работает nth-child()

Question

Не работает nth-child() по идее должно быть три разных фона трем блокам, но у меня везде одинаковой фон =(

.block{
width:200px;
border:1px solid black;
height:150px;
margin:20px;
display:inline-block;
}
.text{
color:red;
font-size:20px;
position:absolute;
}
.Background-img{
height:100%;
width:100%;
background-size: cover;
margin:0;
padding: 0;
}

.Background-img:nth-child(1) {
background-image: url('https://i.ibb.co/68rFc89/1560329641-2.jpg');
}

.Background-img:nth-child(2) {
background-image: url('https://i.ibb.co/wJFNhpN/multfilm-lyagushka-32117.jpg');
}

.Background-img:nth-child(3) {
background-image: url('https://i.ibb.co/5jMv9vd/detail-2b7c4f333c37580ee03adaa3bc47c4da.jpg');
}

<div class ="block">
<a class ="Link" href=""></a>
<p class ="text"> 1 </p>
<figure class="Background-img"> </figure>
</div>

<div class ="block">
<a class ="Link" href=""></a>
<p class ="text"> 2 </p>
<figure class="Background-img"> </figure>
</div>

<div class ="block">
<a class ="Link" href=""></a>
<p class ="text"> 3 </p>
<figure class="Background-img"> </figure>
</div>

Answer 1

Твоя ошибка в том, что здесь лучше использовать nth-of-type. И для надежности я бы это все обернула в отдельный div, чтобы не считались какие-то другие элементы.

Ну и лучше не использовать классы с заглавными буквами. Сложно следить где с заглавной, где с маленькой. Опечатаешься, вылезет баг и будет сложно искать.

.block{
width:200px;
border:1px solid black;
height:150px;
margin:20px;
display:inline-block;
}
.text{
color:red;
font-size:20px;
position:absolute;
}
.Background-img{
height:100%;
width:100%;
background-size: cover;
margin:0;
padding: 0;
}

.block:nth-of-type(1) .Background-img {
background-image: url('https://i.ibb.co/68rFc89/1560329641-2.jpg');
}

.block:nth-of-type(2) .Background-img {
background-image: url('https://i.ibb.co/wJFNhpN/multfilm-lyagushka-32117.jpg');
}

.block:nth-of-type(3) .Background-img {
background-image: url('https://i.ibb.co/5jMv9vd/detail-2b7c4f333c37580ee03adaa3bc47c4da.jpg');
}

<div class="parent">
<div class ="block">
<a class ="Link" href=""></a>
<p class ="text"> 1 </p>
<figure class="Background-img"> </figure>
</div>

<div class ="block">
<a class ="Link" href=""></a>
<p class ="text"> 2 </p>
<figure class="Background-img"> </figure>
</div>

<div class ="block">
<a class ="Link" href=""></a>
<p class ="text"> 3 </p>
<figure class="Background-img"> </figure>
</div>
</div>

Answer 2

Если бы вы хотя бы бегло ознакомились с документацией - :nth-child(), то обратили бы внимание на описание данного псевдо-класса:

CSS псевдокласс :nth-child() находит один или более элементов, основываясь на их позиции среди группы соседних элементов.

Визуально:

<a class ="Link" href=""></a>              <!-- *:nth-child(1) -->
<p class ="text"> 3 </p>                   <!-- *:nth-child(2) -->
<figure class="Background-img"> </figure>  <!-- *:nth-child(3) -->

Но в вашем случае, при использованием .Background-img:nth-child(1) можно расценивать как условие любой элемент с классом (*) && порядковым номером (*), поэтому в вашем случае игнорируется :nth-child() с параметром 1 и 2, но не 3, т.к. он совпадает по условию.

По вашей задача требуется в каждом .parent .block найти .Background-img и ему выставить background-image в зависимости от порядкового номера родителя, т.е. элемента .block, по этому правильной записью будет являться:

.parent .block:nth-child(1) .Background-img {}
.parent .block:nth-child(2) .Background-img {}
.parent .block:nth-child(3) .Background-img {}

БЛОГ НА HUSL

Не работает nth-child()

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