title: Target first-child with css data attribute
body: <p>I'm messing around with trying to target the first <code>&lt;p&gt;</code> tag in a div that has a data attribute of <code>data-item="8"</code></p>
  
  <p>So far, I've tried this:</p>
  
  <pre><code>[data-item="8"] p:first-child {
  font-size: 1.8rem;
  }
  </code></pre>
  
  <p>as well as this:</p>
  
  <pre><code>p:first-child [data-item="8"]{
  font-size: 1.8rem;
  }
  </code></pre>
  
  <p>and it's not picking up on the style change. Not sure if I am going about this all wrong or if I am missing something where that's not going to work.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div data-item="8"&gt;
    &lt;h3&gt;Test&lt;/h3&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse ut aliquid perspiciatis a aliquam repellat non ipsum necessitatibus distinctio quos molestias asperiores quis eaque, laudantium ipsam nulla adipisci quo nemo!&lt;/p&gt;
  &lt;p&gt;Quam soluta quis doloribus, ut cum iste cumque earum aliquam ratione! Fugiat nemo animi ut corrupti tempora, omnis nulla. Culpa a quibusdam sequi quia totam dolores magni ducimus nesciunt expedita.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>