CSS :has selector is Amazing! | How to use the CSS :has selector

preview_player
Показать описание

The CSS :has selector is amazing! In this CSS tutorial, we will look at how to use the CSS :has selector and practical examples of how the :has selector can improve web development.

🚀 Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

React Suspense & React Error Boundaries with SWR

(00:00) Intro
(00:10) Welcome
(00:33) Starter Code & Set up
(02:00) Forward vs Reverse Selections
(04:13) Selections Based on Child Elements
(06:49) Does :not :has selections
(07:44) :has either = OR selections
(08:40) AND selections
(09:48) :has specificity note
(10:17) A more complex example
(11:56) Nav Menu example
(16:05) Modal example
(17:13) light & dark mode example
(18:53) Bubbles example
(20:32) Input Validation example

📚 Tutorial References:

Was this CSS :has selector tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#css #has #selector
  1. Dave Gray
  2. css has selector
  3. css
  4. css3
  5. has selector
  6. has pseudo
Рекомендации по теме
CSS :has selector 0:26:48

CSS :has selector is Amazing! | How to use the CSS :has selector

Learn CSS :not() 0:05:48

Learn CSS :not() and :has() selector in 6 Minutes

(Finally) Understanding the 0:31:32

(Finally) Understanding the CSS :has Selector

This Is So 0:12:44

This Is So Much More Than Just A Parent Selector

CSS :is selector 0:08:55

CSS :is selector is awesome!

CSS :has() Selector 0:00:59

CSS :has() Selector #css

CSS :not() selector 0:01:00

CSS :not() selector is a game changer

Learn CSS :has 0:00:10

Learn CSS :has Selector - #css #frontend #webdevelopment

Mastering ID and 0:18:07

Mastering ID and Class Selectors in CSS 📚✨: A Beginner's Guide | ID & Class Selectors Made ...

New CSS Feature 0:02:59

New CSS Feature 2022 - Parent Selector :has

Boost Your FrontEnd 0:00:49

Boost Your FrontEnd Performance with CSS Selector Has

Learn CSS :has() 0:10:40

Learn CSS :has() selector by examples: 5 top use cases

CSS has Selector 0:00:15

CSS has Selector #shorts

Super simple & 0:00:45

Super simple & useful CSS selector trick

CSS :has selector 0:00:10

CSS :has selector #coding #webdevelopment 🚀

🔥 Use CSS 0:00:50

🔥 Use CSS :where() to select multiple children inside a parent selector. Super handy for H1→H6

Target Parent Element 0:03:20

Target Parent Element With CSS Selector :has()

🎨 Advanced Hover 0:00:08

🎨 Advanced Hover Effects with :has() Selector! 🖱️ #CSS #WebDesign #CSSTricks

CSS Tip #16 0:00:57

CSS Tip #16 - is( ) pseudo selector

CSS Selector | 0:00:59

CSS Selector | has ( )

New CSS :user-invalid 0:01:00

New CSS :user-invalid Pseudo Selector #css

css tutorial for 0:07:02

css tutorial for beginners | guide to the CSS :has() selector

Take Your CSS 0:07:04

Take Your CSS to the Next Level with :has() Pseudo-Class Selector

:not | Selector 0:00:23

:not | Selector | CSS | Frontend #shorts

Комментарии
Автор

Please do make more of such videos, your way of explaining is phenomenal. 🔥🛐

anonymous_
Автор

has:: is awesome!!! Like it. This is easy and great. You do a good job.

ademeier
Автор

I've checked right now, and finally the :has selector is now supported on the newer version of Firefox! 🥳🎉

m.quarty
Автор

Couldn't explain this any better! Thank you so much for always providing clear and concise explanations! This helped me understood the new aspect and want to try it out on the old projects!

ichiroutakashima
Автор

Amazing and easy to understand.. thx a lot

gopikrishnag
Автор

I took some notes. Easier... thank you

consciencedimension
Автор

Dave, you are the best. Thanks for all your efforts and helps. I'm appreciate of you

TORNADOafghanistan
Автор

Thank you very much Dave for sharing knowledge with us beginners, appreciate it!

greentea
Автор

:gas could activate other classes if it already have specific style

pastuh
Автор

Excellent! I had forgotten CSS can be somewhat dynamic

Knards
Автор

Thank you, @DaveGrayTeachesCode!
Where do you follow new changes to CSS3?

XenomorphOrthodontist
Автор

🥺🥺it seems you are releasing your ever impressive content way too fast sir, I can't seem to keep up anymore😋😋. I honestly need to buckle up.
Thanks for your selfless service sir🎉💯💯💯

akintobby
Автор

Hello sir could you prepare a tutorial on "how to add a global loader in axios instance globally" .
it would be really helpful.

ajaynegiii
Автор

Hmmm, this video is pretty good. Why do you have so small amount of views?? Not fair...
(Btw, what theme are you using)

dkorjey
Автор

Great video as usual. Great pseudo selector too. 0.615 seems oddly specific. I feel like there is a hidden message here. 🙂

bmehder
Автор

19:50 The bubbleswitch worked differently for me... The left 20% had the gradient, then came the body's background color of lightslategray and the right 20% of that had the bubbles. Setting \background-size: 20% auto, auto\ seems to have fixed it. Is that correct?

robinheyer
Автор

Does anyone know what vscode theme is being used?

karayhannaufalarrafi
Автор

Can I use has to be at the start of the video, like it's not supported fully yet and even after not everyone going to be on the latest update :(

codernerd
Автор

It doesn't work on firefox u.u

When was this has selector released?

dexter
Автор

:has() still has lack of support on some modern browsers. For example, Firefox.

dopetag