The powerful features of css pseudo class selectors :nth-child and :nth-last-child

2 years 4 months ago

CSS3 provides powerful pseudo-classes that allow the CSS designer to select multiple elements according to their positions in a document tree. The :nth-child(an+b) CSS pseudo-class  matches a number of child elements whose numeric position in the series of children matches the pattern an+b. The argument, n, can be a keyword, a number, or a number expression of the form an+b. Think of "n" as starting at zero and then a set of all positive integers. Then complete the expression. So the 2n is "2xn", and the whole expression together is "(2xn)+3". Now substituting in the zero and positive integers, we get: (2 x 0) + 3 = 3 = 3rd Element (2 x 1) + 3 = 5 = 5th Element etc … How about the :nth-child(3n+1)? (3 x 0) + 1 = 1 = 1st Element (3 x 1) + 1 = 4 = 4th Element (3 x 2) + 1 = 7 = 7th Element etc…

Examples:

1n+0, or simply n, would match every child element. 2n+0, or simply 2n, would match child elements 2, 4, 6, 8, etc. You can substitute the keyword even for this expression. 2n+1 would match child elements 1, 3, 5, 7, etc. You can substitute the keyword odd for this expression. 3n+4 would match child elements 4, 7, 10, 13, etc. More Examples:

Select Only the Fifth Element

select only fifth element

li:nth-child(5) {
    color: red;
}

Select All Except The First Five

select all except the first five

li:nth-child(n+6) {
    color: red;
}

Select Only The First Five

Select Only The First Five

li:nth-child(-n+5) {
    color: red;
}

Select Every Fourth, Starting At The First

Select Every Fourth, Starting At The First

li:nth-child(4n-7) {  /* or 4n+1 */
    color: red;
}

Select Only Odd

CSS Select Only Odd

li:nth-child(odd) {
    color: red;
}

Select Only Even

CSS Select Only Even

li:nth-child(even) {
    color: red;
}

Select The Last Element

CSS Select The Last Element

li:last-child {
    color: red;
}

Select the Second to Last Element

CSS Select the Second to Last Element

li:nth-last-child(2) {
    color: red;
}

Repeating Patterns Example

CSS Repeating Patterns Example

.example div:nth-child(7n+1){
   background: red;
}

.example div:nth-child(7n+2){
   background: orange;
}

.example div:nth-child(7n+3){
   background: yellow;
}

.example div:nth-child(7n+4){
   background: green;
}

.example div:nth-child(7n+5){
   background: blue;
}

.example div:nth-child(7n+6){
   background: indigo;
}

.example div:nth-child(7n+7){
   background: violet;
}

Result Sets for Pseudo-class Expressions

-n+3 n 2n+1 3n+1 4n+1 5n+5 4n 5n-2
3 0 1 1 1 5
2 1 3 4 5 10 4 3
1 2 5 7 9 15 8 8
3 7 10 13 20 12 13
4 9 13 17 25 16 18
5 11 16 21 30 20 23
Shahid Hussain

Shahid Hussain is a frontend developer and UX Consultant living and working in Sweden. Shahid is specializes in JavaScript development and developed anything from WordPress websites to complex e-commerce JavaScript applications. Shahid can also sketch, from websites to apps and icons, even print material. He works on content-centric, and mobile products, as well as cross-portal user experiences. Photography, music and travelling can trigger his attention.