JSFiddle - React, Tailwind, and code Playground

HTML

<span class="foo">
	<span class="bar">
		<span class="foo">
			<span class="bar">
				<span class="foo">
					<span class="bar">
                        <strong>1black <a href="http://example.org">green</a></strong>
                    </span>
 <strong><br>2black <a href="http://example.org">red</a></strong>

</span> <strong><br>3black <a href="http://example.org">green</a></strong>

</span> <strong><br>4black <a href="http://example.org">red</a></strong>

</span> <strong><br>5black <a href="http://example.org">green</a></strong>

</span> <strong><br>6black <a href="http://example.org">red</a></strong>

</span>

CSS

span {
    color: black;
}
.foo a {
    color: yellow;
}
.bar a {
    color: green;
}
.bar > .foo a {
    color: red;
}