Select first element with data attribute
<p>I want to select the very first match of a paragraph <code>&lt;p&gt;</code> containing the attribute <code>data-result="INVALID"</code> using css.</p>

<p>I have tried this little script without any success. No element gets selected.</p>

<p>I am limited to only css for this solution (No jQuery). Is there any solution for this problem ?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>p[data-result="INVALID"]:first-of-type {
  color: red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p data-result="VALID"&gt;&lt;b&gt;Note:&lt;/b&gt; a:active MUST come after a:hover in the CSS definition in order to be effective.&lt;/p&gt;


&lt;p data-result="INVALID"&gt;&lt;b&gt;Note:&lt;/b&gt; a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.&lt;/p&gt;
&lt;p data-result="INVALID"&gt;&lt;b&gt;Note:&lt;/b&gt; a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.&lt;/p&gt;</code></pre>
</div>
</div>
</p>