nth:child выбор конкретных элементов (8, 10, 12, 15, 17, 19, 22, 24, 26 …)

142

30 декабря 2020, 14:20

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

Есть 25 дивов, каким образом можно выбрать определенные дивы (8, 10, 12, 15, 17, 19, 22, 24, 26) и т.д?

Answer 1

При условии, что это именно только блоки друг с другом, без других элементов... и имеют одного общего родителя, на них можно будет тыкать по конкретному номеру:

.test { 
  display: inline-block; 
  width: 60px; height: 60px; 
  border: 2px solid orange; 
  margin: 5px; 
} 
 
.test:nth-child(8), 
.test:nth-child(10), 
.test:nth-child(12), 
.test:nth-child(15), 
.test:nth-child(17), 
.test:nth-child(19), 
.test:nth-child(22), 
.test:nth-child(24), 
.test:nth-child(26) { background: #800; }

<div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
  <div class="test"></div> 
</div>

При этом, nth-child это именно про элемент общего родителя... если среди этих блоков добавить какой-либо еще другой, числа уже будут означать другие элементы (но всё еще можно будет тыкнуть на нужный, изменив числа).

Но если такое дело... можно уж добавить еще один дополнительный класс, именно тем блокам, которые вам нужны. И писать отдельный стиль именно для этого класса.

Answer 2

с :nth-of-type()

.test:nth-of-type(2n+8){
  /* Свои стили */
  background: cornsilk;
  color: black;
}

ПОСЛЕДНИЕ ВОПРОСЫ

18:43

Продвижение своими сайтами как стратегия роста и независимости
22:46

Бизнесы, которым нужна ERP система
06:18
12:23
20:41

Как малому бизнесу конкурировать с маркетплейсами
06:31
21:28
22:18

Какой ноутбук Lenovo выбрать для студента
08:00

Все вопросы

ТОП-10

Все популярные вопросы

nth:child выбор конкретных элементов (8, 10, 12, 15, 17, 19, 22, 24, 26 …)

import value javascript to flask

Доступ к элементам массива из другого скрипта

Вращение 2D объекта

Обрезать спец. символ С#