:nth-child and :nth-of-type
Select elements by their position in a parent using nth formulas and type selectors.
:nth-child and :nth-of-type is a free CSS Academy lesson on CoddyKit. This is lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.
What are Structural Pseudo-classes?
Structural pseudo-classes select elements based on their position within their parent. They eliminate the need for adding classes or JavaScript to target specific child elements.
:first-child and :last-child
Select the first or last child of a parent:
<ul><li>First item (no top border)</li><li>Middle item</li><li>Last item (no bottom margin)</li></ul>
:nth-child() Basics
:nth-child(n) selects elements based on their position (1-indexed) among siblings of any type.
<ul><li>Item one</li><li>Item two</li><li>Item three</li></ul>
:nth-child() with Keywords
Use keyword odd or even for alternating row styling:
<table><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr><tr><td>Row 4</td></tr></table>
:nth-child() with Formulas
Use the formula An+B where A is the step and B is the offset. n starts at 0 and increments.
3n— every third (3, 6, 9...)3n+1— first of every three (1, 4, 7...)-n+3— first three items only
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
:nth-of-type()
:nth-of-type() counts only siblings of the same element type, ignoring others. This is important when element types are mixed.
<h2>Heading</h2><p>First paragraph</p><p>Second paragraph (blue)</p><p>Third paragraph</p>
:first-of-type and :last-of-type
Select the first or last element of a specific tag type among siblings:
<p>Lead paragraph (larger)</p><p>Regular paragraph</p>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%231e90ff'/></svg>" alt="one" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%23ff6347'/></svg>" alt="two" />
:nth-child vs :nth-of-type
Key difference:
p:nth-child(2)— selects the second child IF it is a<p>p:nth-of-type(2)— selects the second<p>regardless of other elements
:only-child and :only-of-type
:only-child selects an element that is the sole child of its parent. :only-of-type selects an element that is the only one of its type in its parent.
<div><p>I'm the only child in this div.</p></div>
:nth-child with of S Selector (Modern)
Modern CSS allows filtering which elements the nth formula counts using :nth-child(An+B of selector):
<ul><li class="featured">Featured 1</li><li>Regular</li><li class="featured">Featured 2 (gold)</li><li class="featured">Featured 3</li></ul>
Practical: Grid Gap on Last Row
Remove bottom margin on the last visible element:
<div class="grid"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>
Quick Check
Which selector targets every third list item starting from the first?
Recap
:nth-child() counts all siblings by position; :nth-of-type() counts only siblings of the same tag. Use odd/even for striped tables. The An+B formula enables powerful patterns like "every third" or "first five" without adding classes.
Learn CSS with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “:nth-child and :nth-of-type” lesson free?
Yes — the full text of “:nth-child and :nth-of-type” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO. The CSS Academy course includes 4 lessons in total.
What will I learn in “:nth-child and :nth-of-type”?
Select elements by their position in a parent using nth formulas and type selectors. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.
How long does the “:nth-child and :nth-of-type” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- :hover :focus :active and :visited
- :nth-child and :nth-of-type
- :not() :is() and :where()
- :checked :disabled and Form State Pseudos