How do I select first and last child of same class in parent element?

Asked Mar 04 '20 at 15:30

Active Mar 04 '20 at 15:33

Viewed 124 times

I want to select first and last element with class "x" in each div.

When I use the CSS code below, only last element in first container and first element in last container are selected. How do I select first and last elements of same class in parent elements?

div>.x:first-child {
  background: green;
}

div>.x:last-child {
  background: blue;
}

<div>
  <p>
    123
  </p>
  <p class="x">
    123
  </p>
  <p class="x">
    123
  </p>
</div>
<div>
  <p class="x">
    123
  </p>
  <p class="x">
    123
  </p>
  <p>
    123
  </p>
</div>

edited Mar 04 '20 at 15:33

Alon Eitan

11,997
8
49
58

asked Mar 04 '20 at 15:30

Vyacheslav Pashkovsky

I'm assuming that unlike in the HTML you posted that you'll have paragraphs with the x class that aren't the first or last? – j08691 Mar 04 '20 at 15:32
you can find a workaround for the *first* but I don't think so for *last* – Temani Afif Mar 04 '20 at 15:33
1

`:first-child` selects elements that matches the selector and is also the first child in its parent. Likewise for `:last-child`. – Quangdao Nguyen Mar 04 '20 at 15:34

How do I select first and last child of same class in parent element?

0 Answers0