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

December 1, 2022

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?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.
Visit Medevel

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?)

>Solution :

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>