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.
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.
Practical Application of Has Selector
Implementing the Has selector involves using simple syntax like 'figure:has figcaption' to target a figure element based on the presence of a figcaption inside it. By adjusting the selector list, one can target specific elements within a structure, such as styling a paragraph immediately following a figure. This method offers a dynamic approach to styling based on the relationships between elements.
Enhanced Styling Techniques with Has Selector
The Has selector's capability to invert or combine with other selectors like 'not' enhances its functionality. By applying techniques like ':not(:has())', developers can create sophisticated conditional styles or Boolean states. Utilizing these features elevates the selector's potential by allowing for intricate element selection and styling based on complex conditions.
Innovative Uses of Has Selector in Real Projects
Developers have leveraged the Has selector in various projects, such as recreating the popular game Wordle using HTML and CSS. By employing Has for validating input patterns, managing pointer events, and triggering actions based on user interactions, unique gameplay experiences or interactive elements can be crafted without relying on JavaScript. These examples showcase the creative and practical applications of the Has selector in web development.
In this episode Una and Adam expand on episode 61 about :has() by focusing specifically on use cases, tips and tricks. Get inspired and discover new ways to make reactive UI from CSS.