@d3_dx

Как вывести нумерацию для определенных элементов (counter-reset)?

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

nth-child(n+2):nth-child(-n+6)

но что-то counter-reset тогда не работает
5c31bd31f17c5171554834.png
<div class="row">
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
</div>

body {
  font-size: 14px;
  padding: 50px;
}
.row {
  counter-reset: list;
}
.row a {
	width: 35px;
	height: 35px;
	background: #999;
	display: inline-block;
	text-align: center;
	line-height: 35px;
  text-decoration: none;
}
.row a::before {
	content: counter(list)!important;
	counter-increment: list;
  color: #333;
}
  • Вопрос задан
  • 63 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега CSS
.row {
  counter-reset: list -1;
}

.row a::before {
  content: counter(list);
  counter-increment: list;
}

.row a:first-child::before,
.row a:last-child::before {
  content: "";
}

https://jsfiddle.net/Ltgybcq3/1/

или

.row {
  counter-reset: list 0;
}

.row a:not(:first-child, :last-child)::before {
  content: counter(list);
  counter-increment: list;
}

https://jsfiddle.net/Ltgybcq3/2/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы