CSS :has() Examples

Style elements based on their contents.

In this example if there is an embeded iframe (video), audio file or both - change the background color of the post. 

.post:has(iframe) {
  color: #000;
  background: #beff00;
}

.post:has(audio):has(iframe) {
  color: #fff;
  background: #FF474E;
}

.post:has(audio):not(:has(iframe)) {
  color: #000;
  background: #00FFF5;
}

739: The LoFi Movement: Building Local First Apps

Join Wes and Scott as they explore LoFi (local first) web development, delving into CRDT, Websockets, IndexedDB, SQLite, and more. Discover when Local-First shines and when it’s better to steer clear in this episode packed with practical insights.

736: CJ Reynolds is Joining Syntax

Scott and Wes introduce Syntax’s new Senior Content Producer, CJ Reynolds, who will be creating video deep-dives and companion content for topics covered on the podcast. CJ, also known as the host of Coding Garden, shares his passions for web development, teaching and experimenting with new technologies.

714: CSS :has() in Every Browser! 10 Uses

CSS :has() is out in all browsers and Wes and Scott have got the top 10 reasons you should start using :has() now.

18: All About CSS Grid

It's a long awaited CSS Grid show! How does it work? When do you use it? What's the difference between Grid and Flexbox?