Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

nth of type

The nth-of-type structural pseudo-class selector is used to target and style specified child elements according to their position in their specified parent element. This selector is similar to the nth-child() selector, but differs by only counting specified elements to make selections and it does not count other element types in the parent.
Syntax Logicelement:nth-of-type( integer | divisible_by ) { property_list }

CSS Code Example

<style> p:nth-of-type(2) { color:#F0F; } </style> <div> <h3>Heading content</h3> <p>Paragraph content...</p> <p>Paragraph content...</p> <p>Paragraph content...</p> </div> <hr /> <div> <h3>Heading content</h3> <p>Paragraph content...</p> <p>Paragraph content...</p> <p>Paragraph content...</p> </div> Use divisible_by logic to target elements in positions that are divisible by your specified number: <style> p:nth-of-type(odd) { /* Or (2n+1) */ color:#F0F; } </style> <div> <h3>Heading content</h3> <p>Paragraph content...</p> <p>Paragraph content...</p> <p>Paragraph content...</p> </div> <hr /> <div> <h3>Heading content</h3> <p>Paragraph content...</p> <p>Paragraph content...</p> <p>Paragraph content...</p> </div>

CSS

Selectors

universaltypecompoundclassidnotattributedescendantchildadjacent siblinggeneral siblingfirst childlast childonly childfirst of typelast of typeonly of typenth childnth last childnth of typenth last of typeemptyrootfirst linefirst letterbeforeafterlinkvisitedhoveractivefocustargetenableddisabledcheckedlang