Как получить доступ к значению класса элемента через CSS

Question

Как я могу получить доступ к числам (1 и 2 в примере ниже) в конце строки класса абзаца через CSS?

<p class="cooking-step-1"><br> <!-- Second step ... --><br> </p>

<p class="cooking-step-2"><br> <!-- Second step ... --><br> </p>

Я могу получить доступ к этим абзацам через следующий селектор: p[class^="cooking-step-"]
Я хочу добавить номер абзаца перед текстом внутри него через свойство CSS content.Как мне этого добиться?

Answer 1

Это возможно при использовании счетчиков .Тем не менее, поддержка браузера не очень удобна, и я думаю, что спецификация для CSS3 изменилась.

По сути, вам даже не нужен класс cooking-step-N.Если вы используете класс, подобный cooking-step, вы можете просто позволить подсчёту сделать подсчет за вас.Увеличивайте его на каждом .cooking-step и используйте counter() для content.

Answer 2

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

Если вы действительно хотите использовать CSS, то вам нужны счетчики. В содержащем элементе для этих абзацев примените стиль counter-reset: step. Тогда для тегов вашего абзаца используйте:

p:before {   
    counter-increment: step;   
    content: counter(step)". ";   
}  

Это должно работать в современных браузерах, но из-за простоты и устаревшей поддержки браузеров, я думаю, вы будете счастливы, если бы просто упорядоченный список.