Css nth-child from 1 to 5

Try it

Note that, in the element:nth-child() syntax, the child count includes children of any element type; but it is considered a match only if the element at that child position is of the specified element type.

Syntax

:nth-child() takes a single argument that describes a pattern for matching element indices in a list of siblings. Element indices are 1-based.

:nth-child(  [ of  ]? )

Keyword values

odd

Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc.

Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc.

Functional notation

Represents elements in a list whose indices match those found in a custom pattern of numbers, defined by An+B, where:

• A is an integer step size,
• B is an integer offset,
• n is all nonnegative integers, starting from 0.

It can be read as the An+B-th element of a list.

Examples

Example selectors

tr:nth-child(odd) or tr:nth-child(2n+1)

Represents the odd rows of an HTML table: 1, 3, 5, etc.

Represents the even rows of an HTML table: 2, 4, 6, etc.

Represents the seventh element.

Represents elements 5 [=5×1], 10 [=5×2], 15 [=5×3], etc. The first one to be returned as a result of the formula is 0 [=5x0], resulting in a no-match, since the elements are indexed from 1, whereas n starts from 0. This may seem weird at first, but it makes more sense when the B part of the formula is >0, like in the next example.

Represents the seventh and all following elements: 7 [=0+7], 8 [=1+7], 9 [=2+7], etc.

Represents elements 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], etc.

Represents the first three elements. [=-0+3, -1+3, -2+3]

Represents every

element in a group of siblings. This selects the same elements as a simple p selector (although with a higher specificity).

Represents every

that is the first element in a group of siblings. This is the same as the :first-child selector (and has the same specificity).

Represents the eighth through the fifteenth

elements of a group of siblings.

Detailed example

HTML

<h3>
  <code>span:nth-child(2n+1)code>, WITHOUT an <code><em>code> among
  the child elements.
h3>
<p>Children 1, 3, 5, and 7 are selected.p>
<div class="first">
  <span>Span 1!span>
  <span>Span 2span>
  <span>Span 3!span>
  <span>Span 4span>
  <span>Span 5!span>
  <span>Span 6span>
  <span>Span 7!span>
div>

<br />

<h3>
  <code>span:nth-child(2n+1)code>, WITH an <code><em>code> among the
  child elements.
h3>
<p>
  Children 1, 5, and 7 are selected.<br />
  3 is used in the counting because it is a child, but it isn't selected because
  it isn't a <code><span>code>.
p>
<div class="second">
  <span>Span!span>
  <span>Spanspan>
  <em>This is an `em`.em>
  <span>Spanspan>
  <span>Span!span>
  <span>Spanspan>
  <span>Span!span>
  <span>Spanspan>
div>

<br />

<h3>
  <code>span:nth-of-type(2n+1)code>, WITH an <code><em>code> among the
  child elements.
h3>
<p>
  Children 1, 4, 6, and 8 are selected.<br />
  3 isn't used in the counting or selected because it is an
  <code><em>code>, not a <code><span>code>, and
  <code>nth-of-typecode> only selects children of that type. The
  <code><em>code> is completely skipped over and ignored.
p>
<div class="third">
  <span>Span!span>
  <span>Spanspan>
  <em>This is an `em`.em>
  <span>Span!span>
  <span>Spanspan>
  <span>Span!span>
  <span>Spanspan>
  <span>Span!span>
div>

CSS

html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.first span:nth-child(2n + 1),
.second span:nth-child(2n + 1),
.third span:nth-of-type(2n + 1) {
  background-color: lime;
}

Result

See also