By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
CSS pseudo-classes expand its capabilities into a tool that can style web pages using advanced sets of parameters, without the need for JavaScript. In this episode, we'll be looking into the :has(), :is(), and :not() pseudo-classes. We'll explore interesting use cases, using them together, how they work, and whether they're ready to be used in a production project.
Introduction | 00:00:00 - Updating my CSS skills - Exploring YouTube videos found some powerful pseudo-classes that I've never used before
:has() | 00:02:59 - "The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element." - MDN - Use cases for :has() - Using combinators with :has() - Browser support for :has() (Source) - Sources: MDN, Kevil Powell Video
:is() | 00:17:20 - "The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form." - MDN - Shrinking large and complex selectors - Helps with typos/errors in complex selectors - Browser support for :is() (Source) - Sources: MDN, Kevin Powell Video, Steve Griffith Video
:not() | 00:33:31 - “The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.” - MDN - Unexpected behaviours - Using :not() with :has() - Browser support for :not() (Source) - Sources: MDN, Steve Griffith Video
The Importance of Pseudo-Classes Like This | 00:43:26 - Makes CSS more powerful - Gives those learning HTML, CSS, and JS more options to build websites with just HTML & CSS skills while they learn JS
