:nth-of-type не работает

Рейтинг: 1Ответов: 1Опубликовано: 17.06.2023

Шалом, я сделал два ряда блоков, по 3 колонки в каждом. Из-за количества контента, высота второго ряда должна быть выше первого. Для этого, к первому ряду я применил псевдокласс :nth-of-type(1), но он не работает. В чем моя ошибка, не могу понять.

    .row:nth-of-type(1) {
        .column {
            min-width: 400px; 
            margin-bottom: 20px;
        } 
    }

css

    .row {
        display: flex;
        justify-content: space-between;
        .column {
            width: 360px;
            min-height: 600px;

            .materials__img {
                height: 180px;
            }

            .materials__info {
                padding: 24px 18px;

                .materials__title {
                    padding-bottom: 1rem;

                    span {
                        font-weight: 600;
                        font-size: 16px;
                        color: #000;
                        line-height: 20px;
                    }
                }

                .materials__list {

                    ul {

                        li {
                            position: relative;
                            margin-bottom: 20px;
                            color: #818995;
                            font-size: 16px;
                            line-height: 20px;
                            font-weight: 400;
                            padding-left: 40px;

                            &::before {
                                position: absolute;
                                content: '';
                                width: 24px;
                                height: 24px;
                                left: 0;
                                top: 0;
                                background-image: url(../images/check-circle.svg);
                            }
                        }
                    }
                }
            }

            &:hover {
                color: #000;
                box-shadow: 0 0 10px #000;
            }
        }
    }

html

<div class="materials">
                <div class="container">
                    <div class="headline">
                        <span></span>
                    </div>
                    <div class="row">
                        <div class="column">
                            <div class="materials__img"><img src="" alt=""></div>
                            <div class="materials__info">
                                <div class="materials__title"><span></span></div>
                                <div class="materials__list">
                                    <ul>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="column">
                            <div class="materials__img"><img src="" alt=""></div>
                            <div class="materials__info">
                                <div class="materials__title"><span></span></div>
                                <div class="materials__list">
                                    <ul>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="column">
                            <div class="materials__img"><img src="" alt=""></div>
                            <div class="materials__info">
                                <div class="materials__title"><span></span></div>
                                <div class="materials__list">
                                    <ul>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="column">
                            <div class="materials__img"><img src="" alt=""></div>
                            <div class="materials__info">
                                <div class="materials__title"><span>/span></div>
                                <div class="materials__list">
                                    <ul>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="column">
                            <div class="materials__img"><img src="" alt=""></div>
                            <div class="materials__info">
                                <div class="materials__title"><span></span></div>
                                <div class="materials__list">
                                    <ul>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                        <li><span></span></li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="column">
                            <div class="materials__img"><img src="" alt=""></div>
                            <div class="materials__info">
                                <div class="materials__title"><span></span></div>
                                <div class="materials__list">
                                    <ul>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Ответы

▲ 0

Как указано в справке: :nth-of-type ориентируется на tag.

В примере ниже видно, что стиль применился к обоим элементам, так как они оба являются первыми по тегу.

.row:nth-of-type(1) {
  background-color: red;
}
<div>
  <div class="row">1</div>
  <span class="row">2</span>
</div>

В вопросе первым дивом идет

 <div class="headline">

Поэтому следующий див не попадает под условие - что он первый.