These CSS features give us more control on the cascade and specificity
Looking to step up your CSS? I have free and premium courses ๐ https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=moderncascade
A very big thank you to Geoff Graham for his help in making this video possible! https://geoffgraham.me/
๐ Links
โ
More on svh/dvh/lvh: https://youtu.be/ru3U8MHbFFI
โ
More on specificity: https://youtu.be/c0kfcP_nD9E
โ
More on :is() :where() and :has(): https://youtu.be/3ncFpP8GP4g
โ
More on layers: https://youtu.be/NDNRGW-_1EE
โ
More on feature queries @support: https://youtu.be/wPI8CEoheSk
โ
Browser support for :has(): https://caniuse.com/css-has
โ
Browser support for layers: https://caniuse.com/mdn-css_at-rules_layer
โ
Browser support for @scope: https://caniuse.com/css-cascade-scope
โ Timestamps
00:00 - Introduction
01:40 - Order basics
03:10 - Debugging order
04:18 - Order linting
05:55 - Invalid declarations & debugging them
07:40 - Using order and invalid declarations on purpose
10:26 - Feature queries @supports
12:45 - Specificity intro
13:45 - Specificity basics
15:18 - Debugging specificity
16:40 - Modern selectors impact on specificity
24:00 - Cascade Layers introduction
24:38 - Cascade Layers basics
27:25 - Debugging layers
28:45 - Declaring layers before using them
31:28 - The impact of !important on layers
33:30 - Combining layers with โunlayeredโ styles
34:28 - Introduction to scope
36:04 - Scope basics
40:50 - Using scope with style elements inside an element
#css
--
Come hang out with other dev's in my Discord Community
๐ฌ https://discord.gg/nTYCvrK
Keep up to date with everything I'm up to
โ https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
๐บ https://www.twitch.tv/kevinpowellcss
---
Help support my channel
๐จโ๐ Get a course: https://www.kevinpowell.co/courses
๐ Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
๐ Support me on Patreon: https://www.patreon.com/kevinpowell
---
My editor: VS Code - https://code.visualst
Watch on YouTube โ
(saves to browser)
Sign in to unlock AI tutor explanation ยท โก30
Playlist
Uploads from Kevin Powell ยท Kevin Powell ยท 0 of 60
โ Previous
Next โ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
How to create an awesome navigation bar with HTML & CSS
Kevin Powell
Improve your CSS by Keepin' it DRY
Kevin Powell
HTML & CSS for Beginners Part 6: Images
Kevin Powell
HTML & CSS for Beginners Part 7: File Structure
Kevin Powell
HTML & CSS for Beginners Part 4: Bold and Italic text and HTML comments
Kevin Powell
HTML & CSS for Beginners Part 5: Links
Kevin Powell
HTML & CSS for Beginners Part 3: Paragraphs and Headings
Kevin Powell
HTML and CSS for Beginners Part 1: Introduction to HTML
Kevin Powell
HTML and CSS for Beginners Part 2: Building your first web page!
Kevin Powell
HTML & CSS for Beginner Part 8: Introduction to CSS
Kevin Powell
HTML & CSS for Beginners Part 9: External CSS
Kevin Powell
HTML & CSS for Beginners Part 10: Divs & Spans
Kevin Powell
HTML & CSS for Beginners Part 11: Classes & IDs
Kevin Powell
HTML & CSS for Beginners Part 12: The CSS Box Model - Margin, Borders & Padding explained
Kevin Powell
HTML & CSS for Beginners Part 13: Background Images
Kevin Powell
HTML & CSS for Beginners Part 14: Style Text with CSS
Kevin Powell
HTML & CSS for Beginners Part 15: How to style links
Kevin Powell
HTML & CSS for Beginners Part 16: CSS selectors and Specificity
Kevin Powell
HTML & CSS for Beginners Part 17: How to Create and Style HTML Lists
Kevin Powell
HTML & CSS for Beginners Part 18: How Floats and Clears work
Kevin Powell
HTML & CSS for Beginners Part 19: Colors with CSS - hex, rgba, and hsla
Kevin Powell
HTML & CSS for Beginners Part 20: How to center a div
Kevin Powell
HTML & CSS for Beginners Part 21: How to create a basic website layout - the HTML
Kevin Powell
HTML & CSS for Beginners Part 22: How to create a basic layout - the CSS
Kevin Powell
How to Create a Responsive Website from Scratch - Part 1: The HTML #Responsive #HTML5
Kevin Powell
How to Create a Responsive Website from Scratch - Part 2: The Header and Hero area #Responsive #CSS3
Kevin Powell
How to Create a Responsive Website from Scratch - Part 3: The About Section #Responsive #CSS
Kevin Powell
How to Create a Responsive Website from Scratch - Part 4: Building a Responsive Portfolio Section
Kevin Powell
How to Create a Responsive Website from Scratch - Part 5: Call To Action and Footer #CSS #Responsive
Kevin Powell
Tutorial: Learn how to use CSS Media Queries in less than 5 minutes
Kevin Powell
End of the year upate and what's coming to my channel to start the new year
Kevin Powell
Create a CSS only Mega Dropdown Menu
Kevin Powell
CSS Tutorial: Outline and Outline Offset
Kevin Powell
CSS Blending Modes
Kevin Powell
Parallax effect | 2 different ways to add it with jQuery
Kevin Powell
CSS Units: vh, vw, vmin, vmax #css #responsive #design
Kevin Powell
How to Create a Website - Complete workflow | Part 01: Intro + Setting things up
Kevin Powell
100 Subscribers speed coding bonus video
Kevin Powell
How to Create a Website - Complete workflow | Part 02: The Markup #HTML
Kevin Powell
How to Create a Website - Complete workflow | Part 03: Sass Variables and a Mixin #Sass
Kevin Powell
How to Create a Website - Complete workflow | Part 04: Setting up the hero and header
Kevin Powell
How to Create a Website - Complete workflow | Part 05: Typography & Buttons
Kevin Powell
How to Create a Website - Complete workflow | Part 06.1: Building the navigation with Flexbox
Kevin Powell
How to Create a Website - Complete workflow | Part 06.2: Making the nav work with jQuery
Kevin Powell
Redesigning & Coding My Website #CreateICG
Kevin Powell
How to Create a Website - Complete workflow | Part 07: Starting the flexbox grid
Kevin Powell
How to Create a Website - Complete workflow | Part 08: Promo & Problem shooting!
Kevin Powell
How to Create a Website - Complete workflow | Part 09: The CTA and Footer
Kevin Powell
How to Create a Website - Complete workflow | Part 10: Making it responsive
Kevin Powell
How to Create a Website - Complete workflow | Part 11: Making it responsive con't
Kevin Powell
How to Create a Website - Complete workflow | Part 12: Putting the site online
Kevin Powell
Create a Custom Grid System with CSS Calc() and Sass
Kevin Powell
CSS em and rem explained #CSS #responsive
Kevin Powell
Should you use Bootstrap?
Kevin Powell
How to add Smooth Scrolling to your one page website with jQuery
Kevin Powell
Let's learn Bootstrap 4
Kevin Powell
How I approach designing a website - my thought process
Kevin Powell
Build a website with Bootstrap 4 - Part 1: The setup
Kevin Powell
Build a website with Bootstrap 4 - Introduction
Kevin Powell
Build a website with Bootstrap 4 - Part 2: Customizing Variables
Kevin Powell
Related AI Lessons
โก
โก
โก
โก
Best AI Headshot Generators (for Teams) in 2026: I Tested 30+ Tools by Spendingย $3,000+
Dev.to AI
The Australian Government (DISR) Uses Glass.AI
Medium ยท AI
Basta "Blocco dello Scrittore": Ho creato un Hub di 50+ Tool AI gratuiti per scrivere tutto (senza registrazione)
Dev.to AI
The complete beginnerโs guide to building an AI-powered productivity system
Medium ยท AI
Chapters (20)
Introduction
1:40
Order basics
3:10
Debugging order
4:18
Order linting
5:55
Invalid declarations & debugging them
7:40
Using order and invalid declarations on purpose
10:26
Feature queries @supports
12:45
Specificity intro
13:45
Specificity basics
15:18
Debugging specificity
16:40
Modern selectors impact on specificity
24:00
Cascade Layers introduction
24:38
Cascade Layers basics
27:25
Debugging layers
28:45
Declaring layers before using them
31:28
The impact of !important on layers
33:30
Combining layers with โunlayeredโ styles
34:28
Introduction to scope
36:04
Scope basics
40:50
Using scope with style elements inside an element
๐
Tutor Explanation
DeepCamp AI