The CSS Podcast cover image

The CSS Podcast

083: :has() tips and tricks

Jul 3, 2024
Learn about advanced techniques with the :has() selector in CSS, including targeting parent elements, combining selectors, and practical styling applications. Explore interactive CSS animations, focus control in popovers, and 3D game development using :has(). Dive into building a CSS-only 3D tic-tac-toe game and optimizing code with 'has()' in CSS.
36:14

Podcast summary created with Snipd AI

Quick takeaways

  • The :has() selector in CSS revolutionizes element targeting by selecting parents based on children, enabling intricate styling.
  • Combining the :has() selector with other CSS selectors like :not allows for creating complex conditional styles and interactive elements.

Deep dives

Has Selector Overview

The Has selector in CSS allows for selecting parent elements based on their children's presence or state, offering a new level of flexibility. This feature, when combined with CSS combinators, enables intricate styling of children and siblings, unlocking creative possibilities. It provides the capability to traverse up and down elements, selecting specific parent-child relationships, making it a powerful tool for targeting elements.

Get the Snipd
podcast app

Unlock the knowledge in podcasts with the podcast player of the future.
App store bannerPlay store banner

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Save any
moment

Hear something you like? Tap your headphones to save it with AI-generated key takeaways

Share
& Export

Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode