title: Select first element with data attribute
body: <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>