Consider using this specific markup - it cannot be altered (Even though it would be simpler to add more classes or IDs).
There will always be a maximum of six class "test" elements on the page, so the code can be written without certainty of their surrounding markup/containers.
How can I style each of these elements with class "test" to show a different color? I have attempted to use :nth-child and :nth-of-type pseudo selectors with no luck.
<body>
<div>
<span class="test">Testing<span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis</p>
</div>
<span class="test">Testing</span>
<ul>
<li>Test</li>
<li class="test">Test</li>
<li>Test</li>
</ul>
<unknown dynamic container>
<h2 class="test">Test</h2>
</unknown dynamic container>
</body>