Powerful CSS Psuedo-Classes

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