0

Не работает 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>

3
  • Всё работает, во всех трёх случаях ваш Background-img является третьим элементом внутри элемента block. Первыми являются элементы Link, вторыми являются элементы text
    – andreymal
    Commented 26 мар. 2022 в 16:28
  • У меня везде одинаковая картинка лягушка, а картинки должны быть разными Commented 26 мар. 2022 в 16:30
  • 1
    Если вы хотите, чтобы фон менялся в зависимости от позиции block, то значит и добавлять nth-child нужно именно к block: .block:nth-child(1) .Background-img {
    – andreymal
    Commented 26 мар. 2022 в 16:31

2 ответа 2

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 {}
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>

2
  • Ошибка заключается не в том, что используется :nth-child() или :nth-of-type(), а в отсутствие понимая принципа работы данных псевдо-классов.
    – De.Minov
    Commented 27 мар. 2022 в 3:56
  • ну и? задача выше решена, остальное придет со временем.
    – VladykoD
    Commented 27 мар. 2022 в 20:10

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.