Use of property Nth:Child()

Asked

Viewed 54 times

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>

css3

3 answers

3

TL;DR

.grade:nth-child(3n+1) { /*AZUL*/ }
.grade:nth-child(3n+2) { /*ROSA*/ }
.grade:nth-child(3n+0) { /*AMARELO*/ }

The functional rating of :nth-child(An + B) is easier to understand if you think like a JS function (in my opinion, of course).

Imagine that:

:nth-child(An + B)

is equivalent in JS to:

(n % A) === B;

That is to say:

  • A is the value that defines the amplitude of the cycle (of how many elements the pattern starts again).
  • B is the value that defines where within these cycles you want to apply CSS.

If the rule is :nth-child(3n+0) the amplitude is 3, that is, the pattern will be repeated every 3 elements and will be applied when the rest of the division is 0. The catch here is that the first index is 1. So an example with 9 elements would be:

// Regra: 3n+0
elemento_1 = 1 % 3 == 1 // false
elemento_2 = 2 % 3 == 2 // false
elemento_3 = 3 % 3 == 0 // true
elemento_4 = 4 % 3 == 1 // false
elemento_5 = 5 % 3 == 2 // false
elemento_6 = 6 % 3 == 0 // true
elemento_7 = 7 % 3 == 1 // false
elemento_8 = 8 % 3 == 2 // false
elemento_9 = 9 % 3 == 0 // true

So if you want a 3-color repeat pattern, in the order Blue, Pink and Yellow. Just use the rules :nth(3n+1), :nth(3n+2) and :nth(3n+0) so that they all have the same breadth and so that each of them is applied to each step.

Your corrected example:

.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(3n+1) {
    background-color: #009ADE;    /*AZUL*/
}
.grade:nth-child(3n+2) {
    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!

  • That’s the way I got that bullshit. D

  • I suggest reading the link I linked above, tried to leave well explained and with demonstrations

  • Excellent suggestion Bacco! And congratulations on the new position. :)

1


Change the lines as below: 

    .grade:nth-child(3n+1) {
        background-color: #009ADE;    /*AZUL*/
    }
    .grade:nth-child(3n+2) {
        background-color: #EC0080;    /*ROSA*/
    }
    .grade:nth-child(3n+3) {
        background-color: #FFEA00;    /*AMARELO*/
    }

no Nth-Chield the number before no né a multiple and after the "more" is an addition.

https://www.w3schools.com/cssref/sel_nth-child.asp

.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(3n+1) {
        background-color: #009ADE;    /*AZUL*/
    }
    .grade:nth-child(3n+2) {
        background-color: #EC0080;    /*ROSA*/
    }
    .grade:nth-child(3n+3) {
        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>

1

In Nth-Child the first number corresponds to the range to apply the style to the next child element, which in your case will always be 3. The second number can be used to define where the selection will start.

I changed your example code as below:

.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(3n+1) {
    background-color: #009ADE;    /*AZUL*/
}
.grade:nth-child(3n+2) {
    background-color: #EC0080;    /*ROSA*/
}
.grade:nth-child(3n+3) {
    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>

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.