css ：n-child食谱

Posted 2021-05-13

/* Select Only the Fifth Element */
li:nth-child(5) {
    color: green;   
}

/* Select All But The First Five */
li:nth-child(n+6) {
    color: green;   
}

/* Select Only The First Five */
li:nth-child(-n+5) {
    color: green;   
}

/* select every 3rd, starting with 1st */
&:nth-child(3n+1) { 
    color: green;
}

/* select every 3rd, starting with 3rd */
&:nth-child(3n-3) { 
    color: green;
}

/* select first 3 */
&:nth-child(-n+3) { 
    color: green;
}

/* select last 3 */
&:nth-last-child(-n+3) { 
    color: green;
}