CSS nth-child

CSS nth-child is a pseudo-class selector that allows developers to select elements based on their position within a parent element. In other words, it selects every nth child of a parent element.

Syntax

The syntax for using CSS nth-child is as follows:

parent-selector:nth-child(n) {
  /* styles to apply */
}

• parent-selector is the selector for the parent element
• :nth-child is the pseudo-class selector
• n is a positive integer, representing the position of the child to select

Examples

Selecting every odd child

To select every odd child of a parent element, use the :nth-child(odd) selector. For example:

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

This will select every odd li element within a ul and apply the color: red style to it.

Selecting every even child

To select every even child of a parent element, use the :nth-child(even) selector. For example:

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

This will select every even li element within a ul and apply the color: blue style to it.

Selecting a specific child

To select a specific child of a parent element, use the :nth-child(n) selector, where n is the position of the child you want to select. For example:

ul li:nth-child(3) {
  color: green;
}

This will select the third li element within a ul and apply the color: green style to it.

Selecting a range of children

To select a range of children of a parent element, use the :nth-child(n+m) selector, where n is the position of the first child you want to select, and m is the number of children you want to select. For example:

ul li:nth-child(2n+1) {
  color: orange;
}

This will select every odd-numbered li element within a ul and apply the color: orange style to it.

Conclusion

CSS nth-child is a powerful selector that allows developers to select elements based on their position within a parent element. With its flexibility, developers can easily apply styles to specific elements or groups of elements within a larger structure.