Search code examples
csscustom-data-attributepseudo-class

Target first-child with css data attribute

I'm messing around with trying to target the first <p> tag in a div that has a data attribute of data-item="8"

So far, I've tried this:

[data-item="8"] p:first-child {
font-size: 1.8rem;
}

as well as this:

p:first-child [data-item="8"]{
font-size: 1.8rem;
}

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.

HTML:

<div data-item="8">
  <h3>Test</h3>
  <p>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!</p>
<p>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.</p>
</div>
Solution

  • Here you go man. Just the wrong css selector.

    https://codepen.io/jackgisel/pen/dyPxrOG

    [data-item="8"] p:first-of-type {
  ...
}