Если бы я хотел выбрать каждый 4-й элемент, начиная с 5-го места, я бы сделал:

.elem:nth-child(4n+5) {
    //something
}

Но как это сделать для каждого нечетного элемента, начиная с 5-го места? Этот синтаксис не работает:

.elem:nth-child(:oddn+5) {
    //something
}
3
TK123 24 Апр 2017 в 19:59

2 ответа

Лучший ответ

Вы могли бы использовать .elem:nth-child(2n+5)

li:nth-child(2n+5) {
  color: red
}
<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

2n выберет все остальные элементы, а +5 действует как смещение. Итак, с n, начинающимся с нуля, вы получаете 5, 7, 9, 11, ...

5
j08691 24 Апр 2017 в 17:07

Вы можете использовать

  1. :nth-child(odd), чтобы выбрать каждый нечетный элемент
  2. :not(:nth-child(-n + 4)) чтобы не выбирать первые 4 элемента
div:not(:nth-child(-n + 4)):nth-child(odd) {
  background: red;
}
<div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div>

Или, если вы хотите начать с 5-го элемента, вы можете перейти к этому

div:not(:nth-child(-n + 5)):nth-child(even) {
  background: red;
}
<div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div>
2
Nenad Vracar 24 Апр 2017 в 17:08