Используя nth-child или nth-of-type, я хочу выбрать этот шаблон -1,5,9,13,17,19 ..- - PullRequest
0 голосов
/ 14 марта 2019

У меня по 4 карты в каждой строке под родительским элементом, и я хочу применить определенные стили к каждому 2-му элементу строки, используя nth-child или nth-of-type

0_ 1 _2_3

4_ 5 _6_7

8_ 9 _10_11

12_ 13 _14_15

1 Ответ

3 голосов
/ 14 марта 2019

Это должно сделать это.

li:nth-child(4n + 2)
  • 4n - это просто выражение, в которое вы вставляете числа: 4(1) = 4th element, 4(2) = 8th element и т. Д.
  • + 2 - это константа, которая начинает запрос со второго дочернего элемента.

li:nth-child(4n + 2) {
  background-color: lightgreen;
}

li { list-style: none; }
<ul>
  <li>item 0</li>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
  <li>item 13</li>
  <li>item 14</li>
  <li>item 15</li>
</ul>
...