:nth-child

Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!

Summary

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element.

This can more clearly be described this way: the matching element is the bth child of an element after all its children have been split into groups of a elements each.

The values a and b must both be integers, and the index of an element's first child is 1.

In other words, this class matches all children whose index fall in the set { an + b; n = 0, 1, 2, ... }.

Among other things, this allows selectors to match every other row in a table.

Syntax

element:nth-child(an + b) { style properties }

Examples

Example selectors

tr:nth-child(2n+1)
Represents the odd rows of an HTML table.
tr:nth-child(odd)
Represents the odd rows of an HTML table.
tr:nth-child(2n)
Represents the even rows of an HTML table.
tr:nth-child(even)
Represents the even rows of an HTML table.
span:nth-child(0n+1)
Represents a span element which is the first child of its parent; this is the same as the :first-child selector.
span:nth-child(1)
Equivalent to the above.
span:nth-child(-n+3)
Matches if the element is one of the first three children of its parent and also a span.

Odd Selector Example

The following HTML...

    <div>
      <span>This span is limed!</span>
      <span>This span is not. :(</span>
      <em>This one is odd. </em>
      <span>Sadly, this one is not...</span>
      <span>But this one is!</span>
    </div>

...using this CSS...

    span:nth-child(2n+1) {
      background-color: lime;
    }

...will result in:

Specifications

Specification Status Comment
Selectors Level 4 Working Draft No change.
Selectors Level 3 Recommendation Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 3.5 (1.9.1) 9.0 9.5 3.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1.9.1) 9.0 9.5 3.1

Notes

  • Opera can't handle dynamic insertion of elements.

Schlagwörter des Dokuments und Mitwirkende

Zuletzt aktualisiert von: kscarfone,
Seitenleiste ausblenden