0Pricing
CSS Academy · Lesson

: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 — 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, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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:

li:first-child {
  border-top: none;
}

li:last-child {
  margin-bottom: 0;
}

:nth-child() Basics

:nth-child(n) selects elements based on their position (1-indexed) among siblings of any type.

li:nth-child(1)  { /* first item */ }
li:nth-child(2)  { /* second item */ }
li:nth-child(-1) { /* does not work — use :last-child */ }

:nth-child() with Keywords

Use keyword odd or even for alternating row styling:

tr:nth-child(odd)  { background: white; }
tr:nth-child(even) { background: #f5f5f5; }

: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
li:nth-child(3n)   { color: red; }   /* every 3rd */
li:nth-child(-n+3) { font-weight: bold; } /* first 3 */

:nth-of-type()

:nth-of-type() counts only siblings of the same element type, ignoring others. This is important when element types are mixed.

p:nth-of-type(2) {
  /* second <p>, ignoring any other element types between them */
  color: blue;
}

:first-of-type and :last-of-type

Select the first or last element of a specific tag type among siblings:

p:first-of-type {
  font-size: 1.2rem; /* drop cap or lead paragraph */
}

img:last-of-type {
  margin-bottom: 0;
}

: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.

p:only-child {
  /* only paragraph, no other siblings */
  font-size: 1.1rem;
}

:nth-child with of S Selector (Modern)

Modern CSS allows filtering which elements the nth formula counts using :nth-child(An+B of selector):

li:nth-child(2 of .featured) {
  /* the second li.featured */
}

Practical: Grid Gap on Last Row

Remove bottom margin on the last visible element:

.grid-item:last-child {
  margin-bottom: 0;
}

/* Remove margin on last row of 3-column grid */
.grid-item:nth-last-child(-n+3) {
  margin-bottom: 0;
}

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.

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, and the CSS Academy course includes 4 lessons in total. 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.

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; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

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

  1. :hover :focus :active and :visited
  2. :nth-child and :nth-of-type
  3. :not() :is() and :where()
  4. :checked :disabled and Form State Pseudos
← Back to CSS Academy