CSS Selectors & Media Queries

Master advanced CSS selectors and responsive design with modern media queries. Learn the latest selector patterns and conditional rules from CSS Selectors Level 4 and Media Queries Level 4.

CSS Selectors Level 4

CSS Selectors Level 4 introduces powerful new selector patterns including :has(), :is(), :where(), and enhanced pseudo-selectors.

Advanced Selector Patterns

Modern selectors from CSS Selectors Level 4 specification

<!-- Basic HTML structure for selector examples -->
<div class="container">
  <header>
    <h1>Advanced CSS Selectors Demo</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Cards with images for :has() selector -->
  <div class="card">
    <img src="image1.jpg" alt="Card with image">
    <h2>Card with Image</h2>
    <p>This card has an image, so it uses grid layout.</p>
  </div>

  <div class="card">
    <h2>Card without Image</h2>
    <p>This card doesn't have an image, so it uses default layout.</p>
  </div>

  <!-- Form validation examples -->
  <form>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
    </div>

    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required minlength="8">
    </div>

    <!-- Buttons with different classes -->
    <button type="submit" class="btn primary">Primary Button</button>
    <button type="button" class="btn secondary">Secondary Button</button>
    <button type="button" class="btn">Default Button</button>
  </form>

  <!-- Article with headings and paragraphs -->
  <article class="article">
    <h2>Article Title</h2>
    <p>This article has both headings and paragraphs.</p>
    <p>The :has() selector can detect this combination.</p>
  </article>

  <!-- Interactive elements for focus -->
  <div class="interactive" tabindex="0">
    <p>Interactive element with focus-visible</p>
    
    <div class="nested-interactive" tabindex="0">
      <p>Nested interactive content</p>
    </div>
  </div>

  <!-- Language and direction examples -->
  <div lang="en-US">
    <p>English content with US locale</p>
  </div>
  
  <div lang="en-GB">
    <p>English content with British locale</p>
  </div>
  
  <div dir="rtl">
    <p>Right-to-left text direction</p>
  </div>

  <!-- Nth-child examples with special class -->
  <ul>
    <li class="special">Special item 1</li>
    <li>Regular item 1</li>
    <li class="special">Special item 2</li>
    <li>Regular item 2</li>
    <li class="special">Special item 3</li>
    <li>Regular item 3</li>
  </ul>

  <!-- Case sensitivity examples -->
  <div title="example">Case insensitive match</div>
  <div class="Warning">Case sensitive match</div>
</div>

Explanation:

CSS Selectors Level 4 provides powerful new ways to select elements, making CSS more expressive and reducing the need for additional classes or JavaScript.

Accessibility Tips:

Use :focus-visible instead of :focus for better keyboard navigation UX
The :has() selector can help create accessible form validation
:focus-within is excellent for accessible dropdown menus
Always test selector support before using in production

Media Queries Level 4

Media Queries Level 4 extends responsive design with new media features for modern devices and user preferences.

Enhanced Media Queries

Modern media query features for responsive and adaptive design

<!-- Responsive layout structure -->
<div class="container">
  <header class="header">
    <h1>Responsive Design Demo</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Responsive grid layout -->
  <main class="responsive-grid">
    <article class="card">
      <h2>Article 1</h2>
      <p>Content that adapts to different screen sizes and user preferences.</p>
    </article>
    
    <article class="card">
      <h2>Article 2</h2>
      <p>This layout responds to viewport width ranges.</p>
    </article>
    
    <article class="card">
      <h2>Article 3</h2>
      <p>Uses modern range syntax for media queries.</p>
    </article>
  </main>

  <!-- Medium layout section -->
  <section class="medium-layout">
    <h2>Medium Screen Layout</h2>
    <p>This section has special styling for medium-sized screens.</p>
  </section>

  <!-- Interactive elements for hover/touch -->
  <div class="interactive-demo">
    <button class="interactive">Hover Me (Desktop)</button>
    <button class="touch-friendly">Touch Friendly Button</button>
    <button class="touch-target">Large Touch Target</button>
    <button class="precise-control">Precise Control Button</button>
  </div>

  <!-- High DPI image examples -->
  <div class="image-gallery">
    <img class="high-dpi-image" src="image.png" alt="High DPI responsive image">
    <img class="regular-image" src="image-regular.png" alt="Regular image">
  </div>

  <!-- Desktop landscape layout -->
  <section class="desktop-landscape">
    <h2>Desktop Landscape Layout</h2>
    <div class="large-or-landscape">
      <div class="column">Column 1</div>
      <div class="column">Column 2</div>
      <div class="column">Column 3</div>
    </div>
  </section>

  <!-- Fine pointer only elements -->
  <div class="fine-pointer-only">
    <p>This content is only visible on devices with precise pointing capability.</p>
  </div>

  <!-- Glass effect for modern browsers -->
  <div class="glass-effect">
    <h3>Glassmorphism Effect</h3>
    <p>Backdrop blur effect for modern browsers.</p>
  </div>

  <!-- Wide color gamut content -->
  <div class="wide-color">
    <p>Wide color gamut content for P3 displays.</p>
  </div>

  <!-- HDR content -->
  <div class="hdr-content">
    <p>High dynamic range content.</p>
  </div>

  <!-- AR overlay for advanced environments -->
  <div class="ar-overlay">
    <p>Augmented reality overlay content.</p>
  </div>
</div>

Explanation:

Media Queries Level 4 enables more sophisticated responsive design by considering user preferences, device capabilities, and environmental factors beyond just screen size.

Accessibility Tips:

Always respect prefers-reduced-motion for users with vestibular disorders
Use prefers-contrast to ensure readability for users who need higher contrast
Test hover and pointer queries to ensure touch device compatibility
Provide fallbacks for newer media query features

CSS Conditional Rules Level 4

CSS Conditional Rules allow testing for feature support and combining multiple conditions for progressive enhancement.

Feature Detection and Conditional Logic

Using @supports and conditional rules for robust CSS

<!-- Feature detection layout examples -->
<div class="main-container">
  <!-- Grid vs Flexbox fallback -->
  <section class="layout">
    <div class="item">Grid Item 1</div>
    <div class="item">Grid Item 2</div>
    <div class="item">Grid Item 3</div>
    <div class="item">Grid Item 4</div>
  </section>

  <!-- Modern grid with gap -->
  <section class="modern-grid">
    <article class="grid-card">Modern Grid Card 1</article>
    <article class="grid-card">Modern Grid Card 2</article>
    <article class="grid-card">Modern Grid Card 3</article>
  </section>

  <!-- Glass effect component -->
  <div class="glass-effect">
    <h2>Glassmorphism Card</h2>
    <p>This card uses backdrop-filter when supported.</p>
    <button>Action Button</button>
  </div>

  <!-- CSS Custom Properties example -->
  <div class="component">
    <h3>Themed Component</h3>
    <p>Uses CSS custom properties when supported.</p>
  </div>

  <!-- Container queries example -->
  <div class="container">
    <div class="card">
      <h4>Container Query Card</h4>
      <p>Layout changes based on container size, not viewport size.</p>
    </div>
  </div>

  <!-- Progressive enhancement layout -->
  <section class="flex-fallback">
    <div class="flex-item">Fallback Item 1</div>
    <div class="flex-item">Fallback Item 2</div>
    <div class="flex-item">Fallback Item 3</div>
    <div class="flex-item">Fallback Item 4</div>
  </section>

  <!-- Focus management examples -->
  <div class="focus-demo">
    <button class="focus-button">Focus Visible Button</button>
    <input type="text" class="focus-input" placeholder="Focus visible input">
    <a href="#" class="focus-link">Focus visible link</a>
  </div>

  <!-- Variable font example -->
  <div class="variable-font">
    <h2>Variable Font Typography</h2>
    <p>This text uses variable fonts when supported by the browser.</p>
  </div>

  <!-- Modern color example -->
  <div class="modern-color">
    <p>This uses OKLCH color space when supported.</p>
  </div>

  <!-- Has selector parent detection -->
  <div class="parent">
    <div class="child">Child element present</div>
  </div>

  <div class="parent">
    <p>No child element here</p>
  </div>

  <!-- Responsive grid with @supports -->
  <div class="responsive-grid">
    <div class="grid-item">Responsive Item 1</div>
    <div class="grid-item">Responsive Item 2</div>
    <div class="grid-item">Responsive Item 3</div>
    <div class="grid-item">Responsive Item 4</div>
  </div>
</div>

Explanation:

CSS Conditional Rules enable progressive enhancement by allowing you to apply styles only when certain features are supported, ensuring graceful fallbacks.

Accessibility Tips:

Use @supports to provide accessible fallbacks for modern features
Test feature support across different browsers and assistive technologies
Combine @supports with @media for comprehensive responsive design
Always provide usable fallbacks for experimental CSS features

Practical Implementation Patterns

Real-world examples combining advanced selectors, media queries, and feature detection for robust web design.

Complete Responsive Component

A practical example combining selectors, media queries, and feature detection

<!-- Complete responsive component example -->
<div class="page-layout">
  <!-- Card container with progressive enhancement -->
  <section class="card-container">
    <!-- Cards with headers -->
    <article class="card" data-theme="light">
      <header class="card-header">
        <h2>Featured Article</h2>
        <span class="card-badge">New</span>
      </header>
      <div class="card-content">
        <p>This is a featured article with enhanced styling due to having a header.</p>
        <p>The card layout adapts based on browser capabilities.</p>
      </div>
      <footer class="card-footer">
        <button class="card-button">Read More</button>
      </footer>
    </article>

    <!-- Card without header -->
    <article class="card" data-theme="light">
      <div class="card-content">
        <h3>Simple Article</h3>
        <p>This card doesn't have a header, so it uses different padding.</p>
      </div>
      <footer class="card-footer">
        <button class="card-button">Learn More</button>
      </footer>
    </article>

    <!-- Dark themed card -->
    <article class="card" data-theme="dark">
      <header class="card-header">
        <h2>Dark Theme Card</h2>
        <span class="card-badge">Premium</span>
      </header>
      <div class="card-content">
        <p>This card demonstrates dark theme variables.</p>
      </div>
      <footer class="card-footer">
        <button class="card-button">Explore</button>
      </footer>
    </article>
  </section>

  <!-- Form validation examples -->
  <section class="form-section">
    <h2>Form Validation Demo</h2>
    <form>
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" id="username" name="username" required minlength="3">
        <span class="error-message">Username must be at least 3 characters</span>
        <span class="success-icon">✓</span>
      </div>

      <div class="form-group">
        <label for="email-field">Email</label>
        <input type="email" id="email-field" name="email" required>
        <span class="error-message">Please enter a valid email</span>
        <span class="success-icon">✓</span>
      </div>

      <div class="form-group">
        <label for="phone">Phone Number</label>
        <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
        <span class="error-message">Format: 123-456-7890</span>
        <span class="success-icon">✓</span>
      </div>

      <button type="submit">Submit Form</button>
    </form>
  </section>

  <!-- High contrast and accessibility -->
  <section class="accessibility-demo">
    <h2>Accessibility Features</h2>
    <p>This section demonstrates high contrast mode support.</p>
    
    <div class="button-group">
      <button class="primary-button">Primary Action</button>
      <button class="secondary-button">Secondary Action</button>
    </div>
  </section>

  <!-- Touch-friendly elements -->
  <section class="touch-demo">
    <h2>Touch-Friendly Controls</h2>
    <div class="control-grid">
      <button class="touch-button">Large Touch Target</button>
      <button class="touch-button">Another Button</button>
      <button class="touch-button">Third Button</button>
    </div>
  </section>

  <!-- High DPI icons -->
  <section class="icon-demo">
    <h2>High DPI Icons</h2>
    <div class="icon-grid">
      <div class="card-icon" aria-label="Settings"></div>
      <div class="card-icon" aria-label="Profile"></div>
      <div class="card-icon" aria-label="Messages"></div>
    </div>
  </section>
</div>

Explanation:

This example demonstrates how to combine modern CSS features with progressive enhancement, ensuring your components work well across all browsers and user preferences.

Accessibility Tips:

Always provide base styles that work without modern CSS features
Test with high contrast mode and screen readers
Ensure interactive elements meet minimum size requirements
Respect user motion preferences for inclusive design

Selectors & Media Queries Best Practices

Advanced Selectors

• Use :is() and :where() to reduce CSS repetition
• Test :has() selector support before production use
• Prefer :focus-visible over :focus for better UX
• Use logical selectors with fallback classes
• Test selector performance with large DOM trees

Responsive Design

• Always respect user preferences (motion, contrast)
• Use range syntax for more readable media queries
• Test hover and pointer capabilities for touch devices
• Combine @media with @supports for robust design
• Provide meaningful fallbacks for all features