Use of comma in selectors combinations

Question

Ok, so I've got a little trouble here, I'm creating a div that'll be the child of another div and will be the parent of •ul, •obviously li & p elements my trouble is that I need to style every first child starting with the first div, I know that :first-child pseudo-class will make the trick, 'cause I've used it too much, given this markup fragment

div>ul,
p:first-child {
  border: 4px solid red;
}

<div>
  <div>
    <ul>
      <ul>
        <li>
          <p>Item 1</p>
          <p>Item 2</p>
        </li>
        <li></li>
        <li></li>
        <p>Yesterday</p>
        <p>Today</p>
        <li></li>
        <li>
        </li>
        <li>
        </li>
        <li>
          <p>Item 3</p>
        </li>
        <li>
          <p>Item 4</p>
        </li>
      </ul>
    </ul>
  </div>
</div>

I can't really understand why Chrome DevTools apply the styles but grays me out the p:first child selector in the console, as seen in this image

don't use comma after `ul` because it will consider as separate. Can you explain exactly what you want to achieve? — Udhay Titus, Feb 24 '21 at 07:02
@Udhay Titus very simple, I want to apply styles to every first child without to write so much, 'cause this little fragment of CSS code is part of a very large stylesheet, do forcely have to write it separate? — Federico Migueletto, Feb 24 '21 at 07:04
can you check the below answer, Is this you trying to achieve? — Udhay Titus, Feb 24 '21 at 07:06
@UdhayTitus already checked but no, that's not what I'm trying, yeah I think'll have to write separately, it's a pain that CSS don't have this functionality, it'll save too much writing time, thank you — Federico Migueletto, Feb 24 '21 at 07:12
You are using nested `ul` if it's correct then you have to use this css `div > div > ul > ul > li > p:first-child` — Udhay Titus, Feb 24 '21 at 07:18
Tell me If i got it right. You are trying to style first `p` in first `li` element in `div > ul`? — ciekals11, Feb 24 '21 at 07:41
@ciekals11 No, I'm trying to style "every first child element", first `div`, first `ul`, first `li` and yes right, first `p` — Federico Migueletto, Feb 24 '21 at 07:53
Oh I see, try `div>ul *:first-child` then it will target first children of any type — coagmano, Feb 24 '21 at 07:54
actually, the `*` isn't even necessary `div>ul :first-child` does the same — coagmano, Feb 24 '21 at 07:55
@FredStark let's simplify it to just `div *:first-child` and voilà, so much headache and was so easy, take your upvote, closed question — Federico Migueletto, Feb 24 '21 at 07:59

Use of comma in selectors combinations

0 Answers0