Property usage nth: child () [duplicate]

Navigation
2

I would like to know if there is a possibility to leave the BLUE , ROSA and YELLOW colors consecutively, I tried using nth: child but I did not quite understand how to do it because it left in the sequence that I would only like the first 3 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>
    
asked by anonymous 25.10.2018 / 00:04

3 answers

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*/
    }

In nth-chield the number before in the né a multiple and after the "more" is an addition.

link 

.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>
    
25.10.2018 / 00:24
3

TL; DR 

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

Functional notation for :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:

  • A is the value that defines the cycle width (of how many in how many elements the pattern resumes).
  • B is the value that defines which part 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 repeat pattern of 3 colors, in the order Blue, Pink and Yellow. Just use the :nth(3n+1) , :nth(3n+2) and :nth(3n+0) rules so everyone has the same range and each one of them is applied at every 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>
    
25.10.2018 / 00:29
1

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

I changed your sample 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>
    
25.10.2018 / 00:26
How do I know if the first character of a string is uppercase? problem in leaving a text on the left and 2 items on the right