0Pricing
CSS Academy · Lesson

:nth-child and :nth-of-type

Select elements by their position in a parent using nth formulas and type selectors.

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;
}

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