2
I would like to know whether it is possible to leave the colours consecutively BLUE, PINK and YELLOW, tried using Nth:Child but I did not quite understand how to do it, because it left in the sequence that I would like only in the first three elements:
.grades {
width: 550px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: baseline;
}
.grade {
width: 100px;
height: 100px;
margin: 5px;
color: #FFF;
font-size: 30px;
text-align: center;
line-height: 100px;
}
.grade:nth-child(1n+0) {
background-color: #009ADE; /*AZUL*/
}
.grade:nth-child(2n+0) {
background-color: #EC0080; /*ROSA*/
}
.grade:nth-child(3n+0) {
background-color: #FFEA00; /*AMARELO*/
}
<div class="grades">
<div class="grade">00h</div>
<div class="grade">01h</div>
<div class="grade">02h</div>
<div class="grade">03h</div>
<div class="grade">04h</div>
<div class="grade">05h</div>
<div class="grade">06h</div>
<div class="grade">07h</div>
<div class="grade">08h</div>
<div class="grade">09h</div>
<div class="grade">10h</div>
<div class="grade">11h</div>
<div class="grade">12h</div>
<div class="grade">13h</div>
<div class="grade">14h</div>
<div class="grade">15h</div>
<div class="grade">16h</div>
<div class="grade">17h</div>
<div class="grade">18h</div>
<div class="grade">19h</div>
<div class="grade">20h</div>
<div class="grade">21h</div>
<div class="grade">22h</div>
<div class="grade">23h</div>
</div>
Very good explanation Fernando!
– LeAndrade
That’s the way I got that bullshit. D
– fernandosavio
I suggest reading the link I linked above, tried to leave well explained and with demonstrations
– Bacco
Excellent suggestion Bacco! And congratulations on the new position. :)
– fernandosavio