CSS :nth-of-type

CSS :nth-of-type(an+b) pseudo class represent all sibling elements of same type whose sibling position (starting from 1) is obtained by putting n=0,1,2,3… and so on.

:nth-of-type values

valueDescription
:nth-of-type(2n+1)Every 1st, 3rd, 5th, ... sibling element of a type
:nth-of-type(odd)Every odd sibling element of a type (same as 2n+1)
:nth-of-type(2n+2)Every 2nd, 4th, 6th, ... sibling element of a type
:nth-of-type(even)Every even sibling element of a type (same as 2n+2)
:nth-of-type(5)Fifth sibling element of a type
:nth-of-type(-n+6)represents the 6 first sibling elements of a type

Example of :nth-of-type

Change background of every alternate (2,4,6…) p tag

<style type="text/css" media="screen">
p:nth-of-type(2n+2) {
  background-color:lightgreen;
}
</style>
<div class="box">
  <div>div1</div>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <p>p4</p>
  <div>div2</div>
  <p>p5</p>
  <p>p6</p>
</div>
refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments