Let's look at few more examples and break it down.

We know that :nth-child() matches elements based on their position in a group of siblings.

#### For e.g. this will select the second li element in a list

``````
li:nth-child(2) {
color: lime;
}``````

#### But this one will select every fourth element among any group of siblings

``````
:nth-child(4n) {
color: lime;
}``````

If we specify, html tag then that will limit itself to that group only.

#### For e.g. the if we add li in the example above then it will be applied to li elements only.

``````
li:nth-child(4n) {
color: lime;
}``````

The notation is an + b

Where a is an integer step size, b is an integer offset, and n is all positive integers, starting from 0.

#### This one will select every odd element

``````
li:nth-child(odd) {
background: green;
}

OR

li:nth-child(2n+1) {
background: green;
}``````

#### This one will select every even element

``````
li:nth-child(even) {
background: green;
}

OR

li:nth-child(2n+0) {
background: green;
}

li:nth-child(2n) {
background: green;
}
``````

#### If you add a single digit in that equation then it will just select that element and apply the style.

``````
// 2nd child

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

// 4th child

li:nth-child(4) {
background: red;
}``````

#### If we add any digit with n, then it will apply the style to that digit multiplied by n and skipping the rest.

For e.g. this will apply style to every 5th li element.

``````
li:nth-child(5n) {
background: red;
}``````

#### To skip a number of elements from the start all we need to do is add (n + ( no. of elements to skip +1 ) )

This will skip first 2 elements and apply style from the 3rd one to all rest of the elements.

So, it represents the 3rd and all following elements: 3 [=0+3], 4 [=1+3], 5 [=2+3], etc.

``````
li:nth-child(n+3) {
background: red;
}``````

#### If we multiply the n with some number in the example above, it will skip that number of elements.

For e.g. this will skip 3 elements starting from 4. So, it will apply style to elements 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], etc.

``````
li:nth-child(3n+4) {
background: red;
}``````

#### If we multiply n with 0 then it will select the specific element that comes after plus sign.

So, in the example above, if we multiply n with 0, then it will become (0n + 4) and the style will be applied to the 4th li element.

``````
li:nth-child(0n+4) {
background: red;
}``````

### We can use -n in the equation as well.

To apply style to first 4 elements use this:

``````
li:nth-child(-n+4) {
background: red;
}``````

Change the number in above example to select your desired elements.

### We can also select specific number of elements in between.

For e.g. this will apply style to all li elements from starting from position 3 to 10 in the group.

``````
li:nth-child(n+3):nth-child(-n+10)
{
background: red;
}``````

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child ### DISTINCT ON: The confusing, unique and useful feature in Postgres ### Explanation of PostgreSQL PgAdmin interface ### An Example of Cross-site Scripting (XSS) Attack in PHP and How to Avoid It? ## Featured Posts ### How to use GROUPING SETS to boost GROUP BY queries in Postgres? ### Common Table Expressions (CTE) in PostgreSQL ### Number Properties in JavaScript 