Скрыть определенное количество элементов из блока

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

Хочу, чтобы при максимальном разрешении экрана 1140px со страницы скрывались, например, 2 последних элемента из блока. Возможно ли это сделать не присваивая каждому элементу отдельный класс?

* {
  box-sizing: border-box;
}
.block {
  max-width: 1140px;
  margin: auto;
}
.block-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.block-item {
  width: 165px;
  height: 165px;
  background-color: black;
  margin: 30px;
}


@media (max-width: 1140px) {
  
}
    <div class="block">
      <div class="block-container">
        <div class="block-item"></div>
        <div class="block-item"></div>
        <div class="block-item"></div>
        <div class="block-item"></div>
        <div class="block-item"></div>
        <div class="block-item"></div>
        <div class="block-item"></div>
        <div class="block-item"></div>
        <div class="block-item"></div>
        <div class="block-item"></div>
      </div>
    </div>

css html
Источник: Stack Overflow на русском

Ответы

▲ 1

Eсть псевдокласс :nth-last-child (https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child)

Вот как будет выглядеть в вашем случае:

* {
  box-sizing: border-box;
}
.block {
  max-width: 1140px;
  margin: auto;
}
.block-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.block-item {
  width: 165px;
  height: 165px;
  background-color: black;
  margin: 30px;
  color: #fff;
}

@media (max-width: 1140px) {
  .block-item:nth-last-child(1), .block-item:nth-last-child(2) {
    display: none;
  }
}
<div class="block">
      <div class="block-container">
        <div class="block-item">1</div>
        <div class="block-item">2</div>
        <div class="block-item">3</div>
        <div class="block-item">4</div>
        <div class="block-item">5</div>
        <div class="block-item">6</div>
        <div class="block-item">7</div>
        <div class="block-item">8</div>
        <div class="block-item">9</div>
        <div class="block-item">10</div>
      </div>
    </div>