Можно ли в nth-of-type как то использовать n в css?

Question

[Роман Якушев]

К примеру вот такой код можно ли сократить:?

.fullplan h4:nth-of-type(1):before {background-image: url('images/fullplan/1.png')}
.fullplan h4:nth-of-type(2):before {background-image: url('images/fullplan/2.png')}
.fullplan h4:nth-of-type(3):before {background-image: url('images/fullplan/3.png')}
.fullplan h4:nth-of-type(4):before {background-image: url('images/fullplan/4.png')}
.fullplan h4:nth-of-type(5):before {background-image: url('images/fullplan/5.png')}

Answer 1

[Дима Паутов]

Сократить, нет! В стандартном css нет возможности создавать цикл с инкрементом

Comments

[Mr Crabbz]

Ошибаетесь. Можно, но не для этой цели. Есть же например :nth-child(2n+2) - выбрать каждый дочерний элемент, индекс которого кратен двум. Это же, по сути, тоже цикл с инкрементом)

[Дима Паутов]

Punkie: Я ответил исходя из данных в вопросе!

Answer 2

[Денис Инешин]

Можно, например с помощью Less

Comments

[Роман Якушев]

но на выходе то less всё равно клиенту отдаёт css, а значит количество символов не уменьшается. верно? у меня то цель сокращения - уменьшение размера файла.

[Денис Инешин]

Роман Якушев: это уже экономия на спичках у вас.

[Роман Якушев]

Денис Инешин: это если такое место одно и всего 5 позиций. а может же быть и больше...

[Денис Инешин]

Роман Якушев: да хоть 100, все равно экономия на спичках. CSS отлично минифицируется, сжимается гзипом и кэшируется браузером. Так что это даже меньше чем спички.

Answer 3

[sergski]

scss

@for $i from 1 through 5 {
	.fullplan h4:nth-of-type(#{$i}):before {
		background-image: url('images/fullplan/#{$i}.png');
	}
}