CSS :nth-child() Pseudo-Class

CSS :nth-child() Pseudo-Class

The CSS :nth-child() pseudo-class selects elements based on their position among siblings that share the same parent. It supports fixed positions, odd and even patterns, mathematical formulas, and optional filtering with the of selector syntax.

:nth-child() Syntax

selector:nth-child(An+B) {
  property: value;
}

The :nth-child() pseudo-class accepts an integer, the keywords odd or even, or an An+B expression.

Fixed Position

li:nth-child(3) {
  color: #006699;
}

Selects a list item when it is the third child of its parent.

Odd and Even

li:nth-child(odd) {
  background-color: #eaf6fc;
}
li:nth-child(even) {
  background-color: #f5f5f5;
}

Selects alternating sibling positions.

Formula

li:nth-child(3n+1) {
  font-weight: bold;
}

Selects positions 1, 4, 7, 10, and so on.

Filtered Syntax

li:nth-child(2 of .featured) {
  border-color: #006699;
}

Selects a list item when it is the second sibling matching .featured.

How :nth-child() Works

The browser determines an element's position among its element siblings, counting from the first child toward the last.

HTML Example

<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
  <li>Item Four</li>
</ul>

CSS Example

li:nth-child(2) {
  color: #006699;
}

Item Two matches because it is the second child of the unordered list.

Counting Starts at One

Sibling positions begin at 1, not 0. The first child has position 1, the second has position 2, and so on.

Elements Only

Text nodes, comments, and whitespace between elements are not counted as child positions.

Each Parent Is Counted Separately

The position calculation restarts for each parent element. A rule can therefore match multiple elements in separate lists or containers.

DOM Order

Positions are based on the document tree, not on visual ordering created with CSS Flexbox or Grid.

Selecting Fixed Positions

Use a positive integer inside :nth-child() to select an element at a specific sibling position.

First Child

li:nth-child(1) {
  font-weight: bold;
}

Matches a list item only when it is the first child of its parent. This is equivalent to li:first-child.

Third Child

li:nth-child(3) {
  color: #006699;
}

Matches a list item at position 3.

Fifth Child

li:nth-child(5) {
  border-bottom: 2px solid #006699;
}

Matches a list item at position 5, if one exists.

Position Zero

li:nth-child(0) {
  color: #006699;
}

This selector does not match any element because sibling positions begin at 1.

Odd and Even Positions

The odd and even keywords provide a convenient way to select alternating elements.

Odd Positions

li:nth-child(odd) {
  background-color: #eaf6fc;
}

Matches positions 1, 3, 5, 7, and so on.

Even Positions

li:nth-child(even) {
  background-color: #f5f5f5;
}

Matches positions 2, 4, 6, 8, and so on.

Position Comparison

Equivalent Formulas

li:nth-child(2n+1) {
  background-color: #eaf6fc;
}
li:nth-child(2n) {
  background-color: #f5f5f5;
}

2n+1 is equivalent to odd, while 2n is equivalent to even.

The An+B Formula

The An+B formula describes a sequence of sibling positions.

Formula Components

In the expression An+B, A controls the interval, n is a nonnegative integer starting at zero, and B provides an offset.

Every Third Child

li:nth-child(3n) {
  color: #006699;
}

Matches positions 3, 6, 9, 12, and so on.

Every Third Child Starting at One

li:nth-child(3n+1) {
  font-weight: bold;
}

Matches positions 1, 4, 7, 10, and so on.

Every Fourth Child Starting at Two

li:nth-child(4n+2) {
  background-color: #eaf6fc;
}

Matches positions 2, 6, 10, 14, and so on.

Common Formulas

Nonnegative Values of n

The formula uses n = 0, 1, 2, 3, and so on. Only results corresponding to positive sibling positions can match elements.

Negative Formulas

Negative coefficients can limit a selector to a finite range of positions.

First Three Children

li:nth-child(-n+3) {
  color: #006699;
}

Matches positions 1, 2, and 3.

First Five Children

li:nth-child(-n+5) {
  background-color: #eaf6fc;
}

Matches positions 1 through 5.

Positions Three Through Six

li:nth-child(n+3):nth-child(-n+6) {
  font-weight: bold;
}

The first condition matches positions 3 and later. The second matches positions 1 through 6. Together, they select positions 3, 4, 5, and 6.

Starting at a Position

li:nth-child(n+4) {
  color: #006699;
}

Matches position 4 and every position after it.

Why Negative Formulas Work

With a negative coefficient, the calculated positions decrease as n increases. Once the results are zero or negative, they cannot match sibling positions.

The of Selector Syntax

Selectors Level 4 adds an optional of selector list that limits which siblings are counted.

Syntax

selector:nth-child(An+B of selector-list) {
  property: value;
}

HTML Example

<ul>
  <li class="featured">Featured One</li>
  <li>Regular One</li>
  <li class="featured">Featured Two</li>
  <li class="featured">Featured Three</li>
</ul>

CSS Example

li:nth-child(2 of .featured) {
  color: #006699;
  font-weight: bold;
}

This rule selects Featured Two because it is the second sibling matching .featured, even though it is the third child overall.

Filtered vs. Unfiltered

li.featured:nth-child(2) {
  color: #006699;
}
li:nth-child(2 of .featured) {
  background-color: #eaf6fc;
}

The first selector requires a featured list item to be the second child overall. The second counts only featured siblings.

Multiple Filters

li:nth-child(odd of .featured, .important) {
  border-left: 3px solid #006699;
}

This rule matches alternating positions among siblings with either the featured or important class.

Browser Compatibility

The of selector syntax is newer than the basic :nth-child() syntax. Check browser support when targeting older browsers.

Mixed Element Types

The :nth-child() pseudo-class counts all element siblings unless the optional of syntax filters the counted elements.

HTML Example

<div>
  <h3>Heading</h3>
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Third paragraph</p>
</div>

CSS Example

p:nth-child(2) {
  color: #006699;
}

This rule selects the first paragraph because it is the second child of the parent.

Not the Second Paragraph

The second paragraph is the third child overall, so it does not match p:nth-child(2).

Selecting by Element Type

p:nth-of-type(2) {
  color: #006699;
}

This rule selects the second paragraph because :nth-of-type() counts siblings of the same element type.

Filtered Alternative

:nth-child(2 of p) {
  color: #006699;
}

This selector also selects the second paragraph by counting only paragraph siblings.

Related Pseudo-Classes

Several structural pseudo-classes select elements based on sibling position or element type.

Comparison

CSS Example

li:nth-child(2) {
  color: #006699;
}
li:nth-last-child(2) {
  font-weight: bold;
}
p:nth-of-type(2) {
  margin-top: 20px;
}

These rules select the second list item from the beginning, the second list item from the end, and the second paragraph among its paragraph siblings.

Choosing the Right Selector

Use :nth-child() for overall sibling position, :nth-of-type() for position among siblings of the same element type, and :nth-last-child() when counting from the end.

:nth-child() Specificity

The :nth-child() pseudo-class contributes a specificity of 0-1-0. When the of syntax is used, the specificity of the most specific selector in its argument list is added.

Specificity Examples

Basic Specificity

li {
  color: #333;
}
li:nth-child(2) {
  color: #006699;
}

When both rules match and other cascade factors are equal, the :nth-child() rule has greater specificity.

Filtered Specificity

li:nth-child(2 of .featured) {
  color: #006699;
}

The class selector inside the of argument contributes additional specificity.

Practical Uses

The :nth-child() pseudo-class is useful for repeating patterns and position-based styling.

Alternating Table Rows

tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

Applies alternating background colors to table rows.

Grid Item Patterns

.grid-item:nth-child(3n) {
  border-color: #006699;
}

Highlights every third grid item according to its DOM position.

First Three Items

.item:nth-child(-n+3) {
  font-weight: bold;
}

Emphasizes the first three children when they have the item class.

Items After the Third

.item:nth-child(n+4) {
  opacity: 0.8;
}

Styles matching items at sibling positions 4 and later.

Filtered List Items

li:nth-child(odd of .featured) {
  background-color: #eaf6fc;
}

Applies alternating styling among featured list items only.

Limitations

The :nth-child() pseudo-class depends on document structure and sibling positions.

Counts All Element Siblings

Without the of syntax, siblings of different element types are included in the position count.

Not Based on Visual Order

CSS Grid and Flexbox can change visual placement without changing the sibling positions used by :nth-child().

Position Changes with the DOM

Adding, removing, or reordering elements can change which elements match.

Hidden Elements Are Counted

Elements hidden with display: none still participate in sibling counting unless the of selector filters them out.

Parent Boundaries

Counting occurs within each parent. The pseudo-class does not count elements across separate containers.

Newer Filter Syntax

The of selector syntax has a different compatibility history from basic :nth-child() formulas.

Not a General Content Selector

The pseudo-class selects by structural position rather than by text content or visual appearance.

Best Practices

• Use :nth-child() when styling depends on sibling position.
• Use odd and even for simple alternating patterns.
• Use An+B formulas for repeating intervals and position ranges.
• Remember that sibling positions start at 1.
• Use :nth-of-type() when counting only siblings of the same element type.
• Use the of syntax when counting only siblings matching specific selectors.
• Keep formulas simple and document complex patterns when necessary.
• Remember that hidden elements can affect position counting.
• Do not assume Flexbox or Grid visual order changes selector matching.
• Check compatibility when using newer of selector syntax.

:nth-child() Example

This example demonstrates alternating row colors and a repeating three-item pattern. Odd rows receive a light blue background, even rows receive a light gray background, and every third row receives a blue left border.

HTML

<ul class="nth-child-demo">
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
  <li>Item Four</li>
  <li>Item Five</li>
  <li>Item Six</li>
</ul>

CSS

.nth-child-demo {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nth-child-demo li {
  padding: 10px 12px;
  margin-bottom: 5px;
  border-left: 4px solid transparent;
}
.nth-child-demo li:nth-child(odd) {
  background-color: #eaf6fc;
}
.nth-child-demo li:nth-child(even) {
  background-color: #f5f5f5;
}
.nth-child-demo li:nth-child(3n) {
  border-left-color: #006699;
  font-weight: bold;
}

Browser Result

Play in Editor

Note: Items 1, 3, and 5 have a light blue background. Items 2, 4, and 6 have a light gray background. Items 3 and 6 also receive a blue left border and bold text.

Browser Support

Baseline: Widely available. Basic :nth-child() selectors, including integers, odd, even, and An+B formulas, are supported in all major modern browsers. The optional of selector syntax was introduced later and requires more recent browser versions.

For current compatibility information, visit Can I Use? .

Specifications

The :nth-child() pseudo-class is defined in CSS Selectors Level 4 as a structural pseudo-class. It supports An+B formulas and an optional of selector list for filtering siblings.

Selectors Level 4 - :nth-child()