:nth-of-type не работает
Шалом, я сделал два ряда блоков, по 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>
Источник: Stack Overflow на русском