.navbar-footer-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-template-areas: "i1 c2 c3"
"i2 c2 c3"
"i3 c2 c3"
"i4 c2 c3";
}
.navbar-footer-list > li:nth-child(1) { grid-area: i1; }
.navbar-footer-list > li:nth-child(2) { grid-area: i2; }
.navbar-footer-list > li:nth-child(3) { grid-area: i3; }
.navbar-footer-list > li:nth-child(4) { grid-area: i4; }
.navbar-footer-list > li:nth-child(5) { grid-area: c2; }
.navbar-footer-list > li:nth-child(6) { grid-area: c3; }
.my-slider
.my-slider-clip
.my-slider-container
.swiper
.my-slider-clip { margin-inline: -50px; overflow: hidden; }
.my-slider-container { padding-inline: 50px; }
.ny-slider .swiper { overflow: visible; }
slidesToShow: 1;
. <div class="filter-item">
<input type="checkbox">
</div>
<div class="filter-item">
<input type="checkbox">
</div>
<div class="filter-item">
<input type="checkbox">
</div>
<button id="apply-button">показать</button>
#apply-button {
display: none;
}
.filter-item {
position: relative;
}
.filter-item input:checked ~ #apply-button {
display: block;
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
}
const button = document.getElementById('apply-button');
document.querySelectorAll('.filter-item').forEach(item => {
const cb = item.querySelector('input[type=checked]');
cb.addEventListener('change', () => {
if (cb.checked) {
item.appendChild(button);
}
})
});
CSS псевдокласс :link позволяет выбирать ссылки внутри элементов. Он выберет любую ссылку, которая ещё не была посещена, даже те, которые уже стилизованы, с помощью селекторов с другими псевдоклассами, относящимися к ссылкам, такими как :hover, :active или :visited
a:link {}
a:visited {}
a:hover {}
a:active {}