Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
skapunker
-2 / 12 / 4
Регистрация: 13.12.2013
Сообщений: 516
1

Как сбросить счетчик для nth элементов?

12.02.2020, 16:51. Просмотров 812. Ответов 1

Всем привет! Столкнулся с такой проблемой и не могу понять, как ее разрулить. Помогите пожалуйста.

Итак, у нас есть некоторые блоки

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="item">Блок 1</div>
<div class="item">Блок 2</div>
<div class="item">Блок 3</div>
<div class="item">Блок 4</div>
<div class="item">Блок 5</div>
<div class="item">Блок 6</div>
<div class="item">Блок 7</div>
<div class="item">Блок 8</div>
<div class="item">Блок 9</div>
<div class="item">Блок 10</div>
Для блоков задан стиль. Таким образом, стиль должен воздействовать на каждый 4 и 5 блок.
Но беда в том, что у 4 элемента отсчет начинается снова, а не с 5 как было бы логично.
В итоге получается ересь на на картинке. Как это разрулить? По сути надо, чтобы отсчет после 5 элемента начинался заново.
Переложить все в блоки по 5 штук не предлагайте.

CSS
1
2
.item {width: calc(33.33333333333% - 20px/3);}
.item:nth-of-type(4n), .item:nth-of-type(5n) {width: calc(50% - 5px);}
0
Миниатюры
Как сбросить счетчик для nth элементов?  
Лучшие ответы (1)
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.02.2020, 16:51
Ответы с готовыми решениями:

epson xp 207 - как сбросить счетчик
epson xp 207 - как сбросить счетчик Предлогаю обсудить идею по сбросу счетчиков в epson xp 207....

Как сбросить счетчик записей (ключевое поле)
В общем есть программа и заполненная база данных. Например есть база преподавателей там идет номер...

Как сбросить счетчик триал Cyberlink PowerDirect 9?
Добрый день! Установку другой программы не предлагать. Истек срок триала, поэтому не могу...

А можно сбросить счетчик?
Мануал по А2002 от bhv утверждает, что поле с типом данных 'счетчик' обнулить нельзя. А нужно. ;)

Возможно ли продлить или сбросить счетчик пробного периода
Добрый день. Мой вопрос заключается: &quot;Возможно ли продлить или сбросить счетчик пробного периода...

1
novichek_1905
411 / 295 / 130
Регистрация: 16.02.2018
Сообщений: 831
12.02.2020, 18:53 2
Лучший ответ Сообщение было отмечено gogolik как решение

Решение

skapunker, у вас не правильный патерн.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
.item:nth-child(even) {
  background-color: darkred;
}
.item {
  background-color: darkblue;
  height: 100px;
  width: 33.333%;
  border: 4px solid #fff;
}
 
.box {
  display: flex;
  flex-wrap: wrap;
}
 
.item:nth-of-type(4),
.item:nth-of-type(5n + 5),
.item:nth-of-type(5n + 9) {
  background-color: green;
  width: 50%;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<div class="box">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
1
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.02.2020, 18:53

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Как сбросить поток для чтения файла с начала?
Добрый вечер. Создали поток, связали с ним файл (текстовый). Начинаем чтение файла, читаем,...

Nth-child и hover для списка
Приветствую всех! Не знаю, как более точно обозвать сабж. Необходимо для каждой ссылки (элемента...

Нужно вычеслить правило для nth-child(n)
вот картинка, у меня для блоков товаров заданы margin-right последнему в строке товару, не нужно...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.