Is it possible to solve the problem without class for div , :last-child?

Question

I want to paint the last one div but I couldn't!

div:first-child {
  background-image: linear-gradient(purple, violet);
}

div:last-child {
  background-image: linear-gradient(45deg, yellow, black);
}

<div>first div</div>
<div>second div</div>
<div class="box">third div</div>
<div id="color">fourth div</div>
<div>fifth div</div>

I found a link but they didn't help me:

:last-child doesn't target last div :last-child not working as expected?

Is it possible to solve the problem without class? (That one will be a class named parent and the second class will be a child that will be inside the div of the parent class?)

marzelin · Accepted Answer · 2022-12-01T17:26:07.720

0

You have to make sure that those divs are really first and last children (take a look at elements panel in dev tools). For example, wrap them in <main> element.

div:first-child {
    background-image: linear-gradient(purple,violet);
}

div:last-child{
    background-image: linear-gradient(45deg,yellow,black);
}

 <main>
    <div>first div</div>
    <div>second div</div>
    <div class="box">third div</div>
    <div id="color">fourth div</div>
    <div>fifth div</div>
 </main>

edited Dec 01 '22 at 17:26

answered Dec 01 '22 at 17:22

marzelin

10,790
2
30
49

Why does it initially color the first div? – Rexsaa Gater Dec 01 '22 at 17:25
because it matches the selection. When you look at the renedered DOM you'll see that in your code there are other elements before and after `div`s. That's why it doesn't apply to your divs. – marzelin Dec 01 '22 at 17:28
do you mean the "class" and "id" ? – Rexsaa Gater Dec 01 '22 at 17:31

Is it possible to solve the problem without class for div , :last-child?

1 Answers1