http://codepen.io/oscholz/pen/qNYPVL
I've been attempting to target only the "Random unattached paragraph."
Despite several attempts using different methods, I haven't had any success in achieving this (see code snippet below).
p:first-of-type {
color: red;
}
.a:not(.relevant) {
color: red;
}
.a:nth-child(1) {
color: red;
}
.a:first-child {
color: red;
}<h1>Hi</h1>
<h2 class="important">Hi again</h2>
<p class="a">Random unattached paragraph</p>
<div class="relevant">
<p class="a">first</p>
<p class="a">second</p>
<p>third</p>
<p>fourth</p>
<p class="a">fifth</p>
<p class="a">sixth</p>
<p>seventh</p>
</div>None of these methods have produced the desired results. What could I be overlooking? I understand that changing the HTML structure is an option, but I prefer not to do so. :)