Есть ли способ получить доступ к n при использовании n-го потомка без javascript? - PullRequest
Новая
       93

Есть ли способ получить доступ к n при использовании n-го потомка без javascript?

3 голосов
/ 13 июля 2020

Скажем, например, у меня есть: 

#with-index span::after {
    content: attr(data-n);
    position: relative;
    top: -8px;
    font-size: 9px;
    font-weight: bold;
    color: red;
}

#without-index span:nth-child(1n)::after {
    content: attr(n);
    position: relative;
    top: -8px;
    font-size: 9px;
    font-weight: bold;
    color: red;
}
<div id="without-index">
    <span>Hello</span> <span>World</span>
</div>

<div id="with-index">
    <span data-n="0">Hello</span> <span data-n="1">World</span>
</div>

Если я помещаю индекс как атрибут, я могу использовать content: attr(data-n). Если есть способ использовать nth-child(1n) для получения значения n для достижения того же эффекта без необходимости устанавливать какой-либо другой атрибут?

1 Ответ

1 голос
/ 13 июля 2020

Вы можете использовать счетчик CSS следующим образом: 

#without-index { counter-reset: number -1; }

#without-index span::after {
    content: counter(number);
    counter-increment: number;
    position: relative;
    top: -8px;
    font-size: 9px;
    font-weight: bold;
    color: red;
}
<div id="without-index">
    <span>Hello</span> <span>World</span>
</div>
...