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

Logical Pseudo-Classes

CSS Logical Pseudo-Classes

CSS Logical Pseudo-Classes help developers write cleaner and more maintainable selectors by applying logical conditions. They reduce repetitive code and simplify complex selector groups.

Common logical pseudo-classes include :is(), :where(), and :not(). These selectors allow you to target multiple elements, exclude specific elements, and improve stylesheet readability.

:is() Pseudo-Class

The :is() pseudo-class matches any selector from a list of selectors.

[code theme="dark"] :is(h1, h2, h3) { color: royalblue; } [/code]

:where() Pseudo-Class

The :where() pseudo-class works similarly to :is() but has zero specificity, making it ideal for reusable CSS rules.

[code theme="dark"] :where(section, article, aside) { margin-bottom: 20px; } [/code]

:not() Pseudo-Class

The :not() pseudo-class selects elements that do not match a specified selector.

[code theme="dark"] button:not(.disabled) { cursor: pointer; } [/code]

HTML Example

[code theme="dark"]
  • HTML
  • CSS
  • JavaScript
[/code]

CSS Example

[code theme="dark"] li:not(.active) { opacity: 0.6; } [/code]

Combining Multiple Selectors

Logical pseudo-classes can simplify lengthy selector lists and improve maintainability.

[code theme="dark"] :is(.btn, .link, .card):hover { transform: translateY(-2px); } [/code]