Uploaded July 2025 | Updated September 2026, 2 weeks ago
β Introduction to style queries: youtu.be/WP5CC5yawfs
β Theming with style queries: youtu.be/E8M6N0SQ280
β Code from this video: github.com/kevin-powell/style-query-spotlight-web-components
β Keep up to date with everything I'm up to kevinpowell.co/newsletter
π¬ Come hang out with other devs in my Discord Community discord.gg/nTYCvrK
β Are you a beginner? HTML & CSS for absolute beginners is for you: learn.kevinpowell.co
π Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/)
π Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/
β Timestamps
00:00 - Introduction
01:45 - limitation of the shadow dom
03:45 - taking advantage of custom properties
06:30 - going even further with style queries
08:45 - changing layouts with style queries
11:45 - you can combine them with other types of queries
#css
---
Help support my channel
π¨βπ Get a course: kevinpowell.co/courses
π Buy a shirt: cottonbureau.com/people/kevin-powell
π Support me on Patreon: patreon.com/kevinpowell or through YT memberships: youtube.com/@KevinPowell/join
---
π§βπ» My editor: VS Code - code.visualstudio.com
π My theme: One Dark Pro Var Night
π€ My font: Cascadia Code
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: codepen.io/kevinpowell
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
β Introduction to style queries: youtu.be/WP5CC5yawfs
β Theming with style queries: youtu.be/E8M6N0SQ280
β Code from this video: github.com/kevin-powell/style-query-spotlight-web-components
β Keep up to date with everything I'm up to kevinpowell.co/newsletter
π¬ Come hang out with other devs in my Discord Community discord.gg/nTYCvrK
β Are you a beginner? HTML & CSS for absolute beginners is for you: learn.kevinpowell.co
π Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/)
π Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/
β Timestamps
00:00 - Introduction
01:45 - limitation of the shadow dom
03:45 - taking advantage of custom properties
06:30 - going even further with style queries
08:45 - changing layouts with style queries
11:45 - you can combine them with other types of queries
#css
---
Help support my channel
π¨βπ Get a course: kevinpowell.co/courses
π Buy a shirt: cottonbureau.com/people/kevin-powell
π Support me on Patreon: patreon.com/kevinpowell or through YT memberships: youtube.com/@KevinPowell/join
---
π§βπ» My editor: VS Code - code.visualstudio.com
π My theme: One Dark Pro Var Night
π€ My font: Cascadia Code
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: codepen.io/kevinpowell
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

π Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/
β Timestamps
00:00 - Introduction
00:30 - basic usage
00:55 - select elements that come after
01:45 - select elements that come before another element
04:40 - select all the siblings of a given element
07:10 - counting how many children an element has
08:18 - bonus tip: nth-child of s along with :has()
#css
β Keep up to date with everything Im up to https://www.kevinpowell.co/newsletter
π¬ Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK
β Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co
π Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/)
π Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/
Help support my channel
π¨βπ Get a course: https://www.kevinpowell.co/courses
π Buy a shirt: https://cottonbureau.com/people/kevin-powell
π Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join
π§βπ» My editor: VS Code - https://code.visualstudio.com/
π My theme: One Dark Pro Var Night
π€ My font: Cascadia Code
Im on some other places on the internet too!
If youd like a behind the scenes and previews of whats coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
And whatever you do, dont forget to keep on making your corner of the internet just a little bit more awesome! :has() is more than a parent selector](https://i.ytimg.com/vi/cxSowU9sDdU/mqdefault.jpg)

π Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/
β Timestamps
00:00 - Introduction
00:10 - inset
01:15 - isolation: isolate
05:00 - fit-content
08:40 - aspect-ratio (and object-fit)
11:05 - text-wrap: balance (and pretty)
#css
β Keep up to date with everything Im up to https://www.kevinpowell.co/newsletter
π¬ Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK
β Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co
π Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/)
π Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/
Help support my channel
π¨βπ Get a course: https://www.kevinpowell.co/courses
π Buy a shirt: https://cottonbureau.com/people/kevin-powell
π Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join
π§βπ» My editor: VS Code - https://code.visualstudio.com/
π My theme: One Dark Pro Var Night
π€ My font: Cascadia Code
Im on some other places on the internet too!
If youd like a behind the scenes and previews of whats coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
And whatever you do, dont forget to keep on making your corner of the internet just a little bit more awesome! CSS properties that solve annoying problems](https://i.ytimg.com/vi/dQ8_F4LPCs8/mqdefault.jpg)


π Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/
Help support my channel
π¨βπ Get a course: https://www.kevinpowell.co/courses
π Buy a shirt: https://cottonbureau.com/people/kevin-powell
π Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join
π§βπ» My editor: VS Code - https://code.visualstudio.com/
π My theme: One Dark Pro Var Night
π€ My font: Cascadia Code
Im on some other places on the internet too!
If youd like a behind the scenes and previews of whats coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
And whatever you do, dont forget to keep on making your corner of the internet just a little bit more awesome! Named media query hack](https://i.ytimg.com/vi/dag6qCNH0Nw/mqdefault.jpg)

π Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/
Help support my channel
π¨βπ Get a course: https://www.kevinpowell.co/courses
π Buy a shirt: https://cottonbureau.com/people/kevin-powell
π Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join
π§βπ» My editor: VS Code - https://code.visualstudio.com/
π My theme: One Dark Pro Var Night
π€ My font: Cascadia Code
Im on some other places on the internet too!
If youd like a behind the scenes and previews of whats coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
And whatever you do, dont forget to keep on making your corner of the internet just a little bit more awesome! Create this trendy blurry glass effect with CSS](https://i.ytimg.com/vi/dsZ7RN9ItR4/mqdefault.jpg)

π Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/
Help support my channel
π¨βπ Get a course: https://www.kevinpowell.co/courses
π Buy a shirt: https://cottonbureau.com/people/kevin-powell
π Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join
π§βπ» My editor: VS Code - https://code.visualstudio.com/
π My theme: One Dark Pro Var Night
π€ My font: Cascadia Code
Im on some other places on the internet too!
If youd like a behind the scenes and previews of whats coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
And whatever you do, dont forget to keep on making your corner of the internet just a little bit more awesome! 1 million subs!](https://i.ytimg.com/vi/e5JY5KzrDwg/mqdefault.jpg)

π Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/
Help support my channel
π¨βπ Get a course: https://www.kevinpowell.co/courses
π Buy a shirt: https://cottonbureau.com/people/kevin-powell
π Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join
π§βπ» My editor: VS Code - https://code.visualstudio.com/
π My theme: One Dark Pro Var Night
π€ My font: Cascadia Code
Im on some other places on the internet too!
If youd like a behind the scenes and previews of whats coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
And whatever you do, dont forget to keep on making your corner of the internet just a little bit more awesome! I challenge a CSS Magician to a CSS Battle!](https://i.ytimg.com/vi/eynG6X_xunI/mqdefault.jpg)


π Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/
β Timestamps
00:00 - Introduction
01:18 - The basic setup
02:20 - Adding the view transition
03:50 - Basics of modifying the view transition with CSS
05:25 - Sliding the new theme in
07:50 - Bouncing in the new theme
09:36 - The circle effect
#css
Help support my channel
π¨βπ Get a course: https://www.kevinpowell.co/courses
π Buy a shirt: https://cottonbureau.com/people/kevin-powell
π Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join
π§βπ» My editor: VS Code - https://code.visualstudio.com/
π My theme: One Dark Pro Var Night
π€ My font: Cascadia Code
Im on some other places on the internet too!
If youd like a behind the scenes and previews of whats coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
And whatever you do, dont forget to keep on making your corner of the internet just a little bit more awesome! Quick & Easy Theme Transitions](https://i.ytimg.com/vi/f_aqzyIDudI/mqdefault.jpg)

π Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/
Help support my channel
π¨βπ Get a course: https://www.kevinpowell.co/courses
π Buy a shirt: https://cottonbureau.com/people/kevin-powell
π Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join
π§βπ» My editor: VS Code - https://code.visualstudio.com/
π My theme: One Dark Pro Var Night
π€ My font: Cascadia Code
Im on some other places on the internet too!
If youd like a behind the scenes and previews of whats coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
And whatever you do, dont forget to keep on making your corner of the internet just a little bit more awesome! Learning how CSS-only carousels are going to work](https://i.ytimg.com/vi/g03Yldh9Nkw/mqdefault.jpg)

π Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/
β Timestamps
00:00 - Introduction
00:30 - The basics of nesting
04:45 - Donβt over nest
05:30 - The & character (ampersand)
08:55 - How & works behind the scenes and a potential problem you could run into
13:45 - It doesnβt work with BEM
16:45 - Searchability isnβt an issue
17:40 - My favorite use case
#css
Help support my channel
π¨βπ Get a course: https://www.kevinpowell.co/courses
π Buy a shirt: https://cottonbureau.com/people/kevin-powell
π Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join
π§βπ» My editor: VS Code - https://code.visualstudio.com/
π My theme: One Dark Pro Var Night
π€ My font: Cascadia Code
Im on some other places on the internet too!
If youd like a behind the scenes and previews of whats coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
And whatever you do, dont forget to keep on making your corner of the internet just a little bit more awesome! Getting started with CSS Nesting](https://i.ytimg.com/vi/h4Xp1QgNkhU/mqdefault.jpg)