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

:target

CSS :target Selector

The :target pseudo-class is used to style an element when its ID matches the current URL fragment.

It works with:

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

in the browser URL.


The:

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

selector is commonly used for:

  • Page navigation
  • Anchor scrolling
  • FAQ accordions
  • Highlighting sections
  • Modal popups without JavaScript

[grid] Anchor Navigation Demo FAQ Target Example Section Highlighting Modal Popup Using :target [/grid]

How :target Works

When a URL contains:

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

the element with:

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

becomes the active target.


Basic Syntax

[code theme="dark"] :target{ styles } [/code]

Simple Example

[code theme="dark"] #about:target{ background:#dbeafe; } [/code]

When:

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

appears in the URL, the section becomes highlighted.


HTML Structure

[code theme="dark"] Go To About
About Section
[/code]

Live Navigation Demo

Section 1 Section 2
Target Section 1
Target Section 2

FAQ Accordion Example

The:

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

selector can create simple accordions without JavaScript.


[code theme="dark"] #faq1:target{ display:block; } [/code]

HTML Structure

[code theme="dark"] Open FAQ
FAQ Content
[/code]

Live Demo

Open FAQ
This content becomes visible when targeted.

Modal Popup Example

CSS-only modal systems can also use:

[code theme="dark"] :target [/code]
[code theme="dark"] #modal:target{ opacity:1; visibility:visible; } [/code]

HTML Structure

[code theme="dark"] Open Modal
Modal Content
[/code]

Live Demo

CSS Target Modal Content

:target vs JavaScript

Feature :target JavaScript
Requires JavaScript No Yes
Dynamic Control Limited Advanced

Advantages of :target

  • No JavaScript required
  • Simple interactive UI
  • Useful for anchor navigation
  • Lightweight solution
  • Easy to implement

Disadvantages

  • Only one target can be active at a time
  • Changes browser URL
  • Limited compared to JavaScript interactions

Cross Browser Compatibility

The:

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

selector is fully supported across all modern browsers.