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

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;
}

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

Все вопросы

ТОП-10

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

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

import value javascript to flask

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

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

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