:nth-child() - HTML CSS CSS Selector

HTML CSS examples for CSS Selector:nth-child

  1. HOME
  2. HTML CSS
  3. CSS Selector
  4. nth-child

Description

The :nth-child(n) selector selects element of the nth child from its parent regardless of its type.

n can be a number, a keyword, or a formula.

:nth-of-type() selector selects the element that is the nth child of a particular type inside its parent.

Example

Odd and even are keywords to match child elements whose index is odd or even. The index of the first child is 1.

Select for odd and even p elements:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(odd) {
    background: red;
}

p:nth-child(even) {
    background: blue;
}
</style><!-- w w  w  . j av  a2 s. c om-->
</head>
<body>

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>

Related Tutorials