Выберите последних 3 детей в зависимости от количества детей - PullRequest
Новая
       43

Выберите последних 3 детей в зависимости от количества детей

1 голос
/ 06 февраля 2020

Я нахожусь в ситуации, когда количество показанных элементов является переменным, и мне нужно решение, которого я не могу достичь, я даже сомневаюсь, что это возможно только с CSS.

I Я хочу сделать выбор по последним четырем элементам, только когда их общее число равно 7. Мой текущий CSS дает правильный результат для 7 элементов, но не для другой суммы.

как я могу объединить это так, чтобы он ищет nth-last-child(7) и flex-item:nth-child(n+5)? 

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  list-style: none;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

.flex-item:first-child:nth-last-child(7),
.flex-item:first-child:nth-last-child(7)~.flex-item:nth-child(-n+4) {
  flex-basis: 23%;
}

.flex-item:nth-last-child(7)~.flex-item:nth-child(n+5) {
  flex-basis: 31%;
  background: blue;
}
<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
</ul>

1 Ответ

2 голосов
/ 06 февраля 2020

Это то, что вы ищете?

.flex-item:first-child:nth-last-child(7)

предназначается для первого ребенка, когда есть только 7 предметов, так что

.flex-item:first-child:nth-last-child(7)~.flex-item:nth-child(n+5)

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

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  list-style: none;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

.flex-item:first-child:nth-last-child(7),
.flex-item:first-child:nth-last-child(7)~.flex-item:nth-child(-n+4) {
  flex-basis: 23%;
}

.flex-item:first-child:nth-last-child(7)~.flex-item:nth-child(n+5) {
  flex-basis: 31%;
  background: blue;
}
<ul class="flex-container">
  <li class="flex-item first">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
</ul>
<br/><br/>
<ul class="flex-container">
  <li class="flex-item first">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
  <li class="flex-item">9</li>
  <li class="flex-item">10</li>
</ul>
<br/><br/>
<ul class="flex-container">
  <li class="flex-item first">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>
...