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
| value | Description |
|---|---|
| :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>Related
- Css :nth-child
- Css :nth-child vs :nth-of-type
- CSS :nth-last-child
- Css :first-child selector - first child element
- Css :first-of-type selector - first child element of type
- CSS :nth-last-of-type
- Css :last-child selector - last child element
- Css :last-of-type selector - last child element of type
- CSS :only-child - define style if element if only child
- CSS :only-of-type - define style of only child a type
