Есть контейнер с блоками. .big_banners
и .medium_banners
- разделы. Элементы раздела - вложенные внутрь разделов div
-ы.
Хотел написать правило, что каждый элемент в разделе должен иметь отступ сверху на 10px, не считая первый элемент раздела. Экспериментировал в псевдоклассами :not
, :first-child
, и в один момент я понял, как можно решить дилемму, но псевдокласс отказывается работать в придуманной мной связке, а именно .banners-content div:not(.medium_banners):first-child {}
. По другому пытался переписать код, убил час, не пришел к выходу.
Правило действует не до конца правильно, оно задаёт класс первому элементу, но игнорирует :not(.medium_banners)
. Почему, неизвестно.
Правило должно обнулять отступ для каждого первого элемента в разделе, но не должно трогать элементы в разделе .medium_banners
(В рамках демонстрации сделал отступ 40px)
.banners-content {
width: 100%;
max-width: 956px;
background: #ddd;
padding: 10px;
margin: 0 auto;
}
/* .big_banners div,
.medium_banners div {
margin-top: 10px;
} */
.banners-content div:not(.medium_banners) {
margin-top: 10px;
}
.banners-content div:not(.medium_banners):first-child {
margin-top: 40px;
}
.big_banners div:first-child {
margin-top: 0;
}
.medium_banners {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 10px;
}
a[href="#"] img{
background: brown;
}
<div class="banners-content">
<div class="big_banners">
<div>
<a href="#" target="_blank">
<img style="width:100%; height:120px" src="./assets/images/big_banner_placeholder.png" alt="" />
</a>
</div>
<div>
<a href="#" target="_blank">
<img style="width:100%; height:60px"
src="./assets/images/medium_banner_placeholder.png"
alt=""
/>
</a>
</div>
</div>
<div class="medium_banners">
<div>
<a href="#" target="_blank">
<img style="width:100%; height:60px"
src="./assets/images/small_banner_placeholder.png"
alt=""
/>
</a>
</div>
<div>
<a href="#" target="_blank">
<img style="width:100%; height:60px"
src="./assets/images/small_banner_placeholder.png"
alt=""
/>
</a>
</div>
</div>
</div>
.big_banners
и нет нужды что-то придумывать с:not
и подобным.medium_banners