:nth-of-type() - HTML CSS CSS Selector

HTML CSS examples for CSS Selector:nth-of-type

  1. HOME
  2. HTML CSS
  3. CSS Selector
  4. nth-of-type

Description

The :nth-of-type(n) selector selects nth element of a particular type within its parent.

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

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

Example

You can use odd and even keywords to match child elements whose index is odd or even. The index of the first child is 1.

The following code shows how to select odd and even p elements.

Demo Code

ResultView the demo in separate window 

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

p:nth-of-type(even) {
    background: blue;
}
</style><!--from w  w w . j  a  v  a  2s . c  o m-->
</head>
<body>

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

</body>
</html>

Related Tutorials