Understand Before You Build

  • HTML
    • Form
    • HTML pattern Attribute
  • CSS
    • inset
    • scroll-snap-type
    • margin-inline
    • Content-visibility
    • Scroll-Driven Animations
    • Isolation
    • @Container
    • @layer
    • :not()
    • :is()
    • :Where()
    • :has()
    • :target
    • backdrop-filter
    • :root
    • Color-scheme
    • Animations
    • Selectors
    • Object-fit
    • Logical Pseudo-Classes
    • :scope
    • Properties
    • Performance
    • Aspect-ratio
    • State Pseudo-Classes
    • Positioning
    • Resize
    • Structural Pseudo-Classes
    • Responsive Design
    • Units
    • Root & Scope Selectors
    • Scrolling
    • At-Rules
    • Target & URL Selectors
    • Spacing
    • Functions
    • Attribute Selectors
    • Layouts
    • Basic Selectors
    • Filters & Effects
    • Colors & Typography
    • Flexbox
    • Combinator Selectors
    • Grid
    • Form & UI State Selectors
    • AI CSS Generator
  • Sass
    • Variables
    • Nesting
    • Mixins
    • Reusable styles
    • Large project management
  • CSS Frameworks
    • Material UI
    • Bootstrap
    • Tailwind CSS
  • React UI
    • Performance Optimization
    • React.memo
    • useMemo
    • useCallback
    • Lazy Loading
    • Code Splitting
    • Virtual DOM Optimization
    • Preventing Re-renders
    • Props & State
    • Hooks
    • Component-based architecture
    • State-driven UI updates
  • Figma
    • Design systems
    • Tokens
    • Variables
    • Auto layout
    • Component variants
    • Design handoff
    • UI consistency

Structural Pseudo-Classes

Structural pseudo-classes are CSS selectors used to target elements based on their position, order, or structure inside the DOM.

These selectors help developers style elements dynamically without adding extra classes manually.

They are commonly used in:

  • Tables
  • Navigation menus
  • Cards and grids
  • Forms
  • Modern UI systems
  • Dynamic layouts

Why Structural Pseudo-Classes Are Important

Without structural selectors, developers often need:

  • Extra classes
  • JavaScript logic
  • Repeated CSS code

Structural pseudo-classes make CSS cleaner and more maintainable.


1. :nth-child()

Selects elements based on their exact child position inside the parent.


Basic Syntax

[code theme="dark"] selector:nth-child(value){ styles } [/code]

Example

[code theme="dark"] li:nth-child(2){ background:#dbeafe; } [/code]

Styles the second list item.


HTML Example

[code theme="dark"]
  • Item 1
  • Item 2
  • Item 3
[/code]

Even and Odd Example

[code theme="dark"] tr:nth-child(even){ background:#f3f4f6; } tr:nth-child(odd){ background:white; } [/code]

Commonly used for zebra-striped tables.


2. :nth-of-type()

Selects elements based on their type position.


Unlike:

[code theme="dark"] :nth-child() [/code]

this selector ignores different element types.


Example

[code theme="dark"] p:nth-of-type(2){ color:blue; } [/code]

Styles the second paragraph only.


HTML Structure

[code theme="dark"]

Heading

Paragraph 1

Paragraph 2

[/code]

Difference Between nth-child and nth-of-type

Selector Based On
nth-child() Exact child position
nth-of-type() Position among same element type

3. :first-child

Selects the first child element inside a parent.

[code theme="dark"] li:first-child{ font-weight:bold; } [/code]

HTML Example

[code theme="dark"]
  • First Item
  • Item 2
  • Item 3
[/code]

Only the first list item becomes bold.


4. :last-child

Selects the last child element.

[code theme="dark"] li:last-child{ color:red; } [/code]

Styles only the final child element.


HTML Example

[code theme="dark"]
  • Item 1
  • Item 2
  • Last Item
[/code]

5. :only-child

Selects an element only if it is the single child inside the parent.

[code theme="dark"] p:only-child{ color:green; } [/code]

Example

[code theme="dark"]

Only Paragraph

[/code]

Since the paragraph is the only child, styles apply.


6. :first-of-type

Selects the first element of a specific type.

[code theme="dark"] p:first-of-type{ font-size:20px; } [/code]

Targets the first:

[code theme="dark"] p [/code]

element among siblings.


HTML Example

[code theme="dark"]

Heading

Paragraph 1

Paragraph 2

[/code]

7. :last-of-type

Selects the last element of a specific type.

[code theme="dark"] p:last-of-type{ color:purple; } [/code]

Targets the final paragraph element.


HTML Example

[code theme="dark"]

Paragraph 1

Paragraph 2

Text
[/code]

8. :empty

Selects elements that contain no content.

[code theme="dark"] div:empty{ display:none; } [/code]

Useful for hiding empty containers dynamically.


HTML Example

[code theme="dark"]
[/code]

Since the div has no content:

[code theme="dark"] :empty [/code]

applies.


Structural Selector Comparison

Selector Purpose
:nth-child() Select by child position
:nth-of-type() Select by element type position
:first-child First child element
:last-child Last child element
:only-child Single child element
:first-of-type First element of type
:last-of-type Last element of type
:empty Empty elements

CSS Structural Pseudo-Classes Live Demo

Below are live examples of commonly used CSS structural pseudo-class selectors using modern layouts and Tailwind CSS utility classes.


Structural Selector Examples Table

Selector CSS Live Demo
:nth-child(2) [code theme="dark"] li:nth-child(2){ background:#dbeafe; } [/code]
  • Item 1
  • Item 2
  • Item 3
:nth-of-type(2) [code theme="dark"] p:nth-of-type(2){ color:blue; } [/code]

Heading

Paragraph 1

Paragraph 2

:first-child [code theme="dark"] li:first-child{ font-weight:bold; } [/code]
  • First Item
  • Item 2
  • Item 3
:last-child [code theme="dark"] li:last-child{ color:red; } [/code]
  • Item 1
  • Item 2
  • Last Item
:only-child [code theme="dark"] p:only-child{ color:green; } [/code]
Only Paragraph
:first-of-type [code theme="dark"] p:first-of-type{ font-size:20px; } [/code]

Heading

First Paragraph

Second Paragraph

:last-of-type [code theme="dark"] p:last-of-type{ color:purple; } [/code]

Paragraph 1

Last Paragraph

Span Element
:empty [code theme="dark"] div:empty{ display:none; } [/code]
Empty div hidden by CSS

Zebra Table Example Using :nth-child()

[code theme="dark"] tr:nth-child(even){ background:#f3f4f6; } [/code]
Name Role
Alex Designer
John Developer
Sarah Manager

Advantages of Structural Pseudo-Classes

  • No extra classes required
  • Cleaner HTML structure
  • Dynamic styling support
  • Improves maintainability
  • Powerful UI targeting
  • Better reusable CSS architecture

Structural pseudo-classes are essential modern CSS selectors for creating dynamic and maintainable UI systems.