рецепты ребенка

Question

У меня есть пример HTML-разметки ниже, и я собираюсь сделать это с помощью рецепта nth child, чтобы показывать только (и, в частности, только) 7th child, когда для медиазапроса задан определенный размер экрана.Можно ли это сделать?Или мне лучше спрятать всех детей из класса изображений, нацеливаясь на 7-го ребенка с помощью другого рецепта n-го ребенка?

<div class = "imageCollection">
<ul class="images">
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
</ul>
</div>

Answer 1

@media screen and (max-width: 767px) {
  .image:nth-child(7) {
    background-color: green;
  }
}

<div class = "imageCollection">
<ul class="images">
    <li class="image">1</li>
    <li class="image">2</li>
    <li class="image">3</li>
    <li class="image">4</li>
    <li class="image">5</li>
    <li class="image">6</li>
    <li class="image">7</li>
    <li class="image">8</li>
    <li class="image">9</li>
</ul>
</div>

это если вы хотите скрыть все, кроме номера ребенка 7

.image:not(:nth-child(7)) {
  display: none;
}

<div class = "imageCollection">
<ul class="images">
    <li class="image">1</li>
    <li class="image">2</li>
    <li class="image">3</li>
    <li class="image">4</li>
    <li class="image">5</li>
    <li class="image">6</li>
    <li class="image">7</li>
    <li class="image">8</li>
    <li class="image">9</li>
</ul>
</div>

Answer 2

Вы можете использовать not() в сочетании с nth-child:

.images li:not(:nth-child(7)) {
  display:none;
}

<div class = "imageCollection">
<ul class="images">
    <li class="image">1</li>
    <li class="image">2</li>
    <li class="image">3</li>
    <li class="image">4</li>
    <li class="image">5</li>
    <li class="image">6</li>
    <li class="image">7</li>
    <li class="image">8</li>
    <li class="image">9</li>
</ul>
</div>