Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

nth last of type

The nth-last-of-type structural pseudo-class selector is used to target and style specified elements according to their position in their parent element. This selector is similar to the nth-of-type() selector, except that it starts counting from the last element upward instead of counting from the first element.
Syntax Logicelement:nth-last-of-type( integer | divisible_by ) { color: orange; }

CSS Code Example

<style> p:nth-last-of-type(3) { color: orange; } </style> <article> <h3>Heading content</h3> <p>Paragraph content...</p> <p>Paragraph content...</p> <p>Paragraph content...</p> <p>Paragraph content...</p> <p>Paragraph content...</p> <p>Paragraph content...</p> <p>Paragraph content...</p> <p>Paragraph content...</p> </article> Use divisible_by logic to target elements in positions that are divisible by your specified number: <style> p:nth-last-of-type(3n+0) { /* every 3rd element */ color: orange; } </style> <article> <h3>Heading content</h3> <p>Paragraph content...</p> <p>Paragraph content...</p> <p>Paragraph content...</p> <p>Paragraph content...</p> <p>Paragraph content...</p> <p>Paragraph content...</p> <p>Paragraph content...</p> <p>Paragraph content...</p> </article>

CSS

Selectors

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