JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<div class="container">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
</div>

CSS

p[class^="p"], p[class*=" p"] {
    color:red
}
p::after{
    content: ' class = "' attr(class) '"';
}

JavaScript

var x = document.getElementsByTagName('p');

for (i = 0; i < x.length; i++) {
    x[i].className += "p" + (i + 1);
}