Как задать отступ?

Question

[Patris546]

Не получается задать отступ первому дочернему элементу с классом plan__item-middle. При этом аналогичный отступ, только элементам с классом plan__item-low задать получилось. В чём ошибка - не пойму. В консоли браузера отступ не отображается.

.plan__item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
max-width: 245px;
&-middle{
    &:first-child{
        margin-right: 158px;
    }
}
    &-imgWrap{
        display: flex;
        justify-content: center;
        align-items: center;
width: 167px;
height: 167px;
border-radius: 50%;
background:linear-gradient(180.00deg, rgba(99, 175, 205, 0.56),rgba(99, 175, 205, 0) 100%);
    }

    p{
        font-size: 16px;
font-weight: 750;
line-height: 24px;
margin-top: 23px;
margin-bottom: 13px;
    }
    blockquote{
        font-size: 16px;
font-weight: 400;
line-height: 24px;
    }

    &-low{
        margin-top: 181px;

        &:first-child{
            margin-right: 68px;
        }
        &:last-child{
            margin-left: 61px;
        }
    }
}

<div class="steps__plan-item plan__item plan__item-low">
                        <div class="plan__item-imgWrap">
                            <img src="../../img/steps/checking.svg" alt="">
                        </div>
                        <p>Подготовительный этап.</p>
                        <blockquote>Обсуждаем и согласовываем площадь, конфигурацию, внутреннюю комплектацию и другие детали.</blockquote>
                    </div>
                    <div class="steps__plan-item plan__item plan__item-middle">
                        <div class="plan__item-imgWrap">
                            <img src="../../img/steps/contact.svg" alt="">
                        </div>
                        <p>Оформление заказа.</p>
                        <blockquote>Фиксируем в договоре сроки, бюджет и все 
                            детали заказа</blockquote>
                    </div>
                    <div class="steps__plan-item plan__item plan__item-middle">
                        <div class="plan__item-imgWrap">
                            <img src="../../img/steps/crane.svg" alt="">
                        </div>
                        <p>Подготовка и отгрузка.</p>
                        <blockquote>Подготавливаем модули по утвержденному проекту 
                            и отгружаем.</blockquote>
                    </div>
                    <div class="steps__plan-item plan__item plan__item-low">
                        <div class="plan__item-imgWrap">
                            <img src="../../img/steps/apartment.svg" alt="">
                        </div>
                        <p>Доставка и сборка.</p>
                        <blockquote>Привозим, собираем и выполняем все необходимые работы.</blockquote>
                    </div>

Comments

[Николай]

Здравствуйте, он в разметке не является первым потомком

[DIVSIDE]

:nth-first-of-type()

[Сергей delphinpro]

DIVSIDE, type - это по тегу, не по классу.

Answer 1

[Сергей delphinpro]

Потому что он не первый потомок.

Вы читаете селектор как "Первый с классом middle",
а нужно читать "Первый, если у него есть класс middle"

Возможно вам подойдет
.plan__item-low + .plan__item-middle {}

на sass

.plan__item{
  &-low + &-middle  {
    margin-right: 158px;
  }
}

Comments

[Patris546]

Спасибо