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.
AD
Episode
216
Interview
Web News

Powerful CSS Psuedo-Classes

Recorded:
September 29, 2022
Released:
October 12, 2022
Episode Number:
216

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.

Listen

Also available on...
...and many more, check your podcast app!

Who’s in This Episode?

No items found.

Show Notes

Topics & Timestamps

  • 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