Как сделать отступы у блоков с помощью nth-child

163

14 апреля 2022, 00:30

Задание:

Установите отступ слева и справа по 30px для элементов с классом .card, начиная со 2го элемента и далее через каждые 3 элемента (то есть, для 2го, 5го и т.д.)

Я пытался сделать отступы через nth-child и nth-of-type, но это не работает.

https://codepen.io/realHikkan/pen/ZEORrGa?editors=1100

Answer 1

работает. Просто вы пропустили точку на 17й строке

У вас:

card:nth-child(3n+2) {
  margin-right: 30px;
  margin-left: 30px;
}

Надо:

.card:nth-child(3n+2) {
  margin-right: 30px;
  margin-left: 30px;
}

Answer 2

все работает, просто

.card:nth-child(1n+4) {
  margin-top: 30px;
}
card:nth-child(3n+2) {
  margin-right: 30px;
  margin-left: 30px;
}

в классе забыта card точка

.parent {
    margin: 10px;
}
.child {
    display: inline-block;
    
    width: 20px;
    height: 20px;
    margin: 15px;
    
    background: red;
}
.child:nth-child(3n+2) {
    background: lime;
}

<div class = 'parent'>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
</div>