This Is So Much More Than Just A Parent Selector

[@aryavbhola3066]

I never knew we had a parent selector

[@mavdotj]

Because your adopted /j

[@mavdotj]

@@321sas ok

[@aryavbhola3066]

@@mavdotj 😂 good one

[@CoconutwCoco]

@@mavdotj I laughed 😅

[@mikecronin2415]

Until Firefox supports it, I don’t think we yet have parental support. Maybe a court order… (that earlier one WAS good, I laughed too).

[@CyberTechBits]

LOVE your content brother! Always have! Keep it coming! Would be nice to see some advanced tutorials around TABLES.... Like dynamically adding rows, cells with calculations like summing values in a row and calculating totals across row. Maybe incorporating data attributes with reduce etc.. Also would be cool to see tutorial on dynamically dragging rows!

[@jenstornell]

This selector will simplify the web a whole lot. Great examples!

[@dariayudina8463]

oh my god, we've been waiting for this selector for almost 10 years! thanks for the video and detailed explanation

[@megavolkan]

This form thing has just f***ing blew my mind! Thank you so much!!! 🤯

[@clevermissfox]

Bw Web Dev Simplified and Kevin Powell, us KZbin CSS learners would be so lost. They both are so knowledgeable and such great teachers. Very grateful for these guys and their time/effort to put out this content

[@Jikodis]

I tried looking at the MDN docs and they did not do a good job explaining this. Thanks for the video!

[@joyvideos1802]

many usage of this has selector. THanks lot😊

[@tommysmith5479]

Hey Kyle. Just a talking point. Reagarding your "special-ribbon" example. You say not having to add the "special" class to your containg div makes the code cleaner. I'd argue that it makes the code less intuitive and readable. If the containing div has a class of ""special" then right away the reader knows what's going on. In essence, I'd say readability over cleaner code.

[@Hasan23]

Thank you for explaining this thoroughly!

[@dominicanfrankster]

I'm super excited for 'has' to get more adoption so I can finally use it outside of hobby projects!!

[@anaselhassani2545]

Thanks for the tutorial, it's much faster than any other method I came across.

[@Yawarr]

Thank you, great quick explanation.

[@sajjadkazemi]

God bless you , I just learnt the thing i was looking for since months ago😍

[@whatsapp176]

Helpline 📲📩⬆️ Questions can come in⬆️

[@devkasunlakshitha]

Thank you so much for these tips. Awesome! ❤

[@Mmg123-masked12G]

finally we can highlight a row when hover on a cell in a grid without js :)

[@alagunoff]

Thanks!

[@chezchezchezchez]

Brilliant! Thx!

[@RaymondFishSC2]

Great video!

[@bijintsy]

Thank you ...

[@rpf23543]

very nice stuff, thank you!

[@MichaelOwens1972]

11/22/2022 Has selector is 82.92% accepted. woot!

[@yassinesafraoui]

I had been doing css for years( I stopped recently), and this was something i dreamed of day and night 😭

[@whatsapp176]

Helpline 📲📩⬆️ Questions can come in⬆️

[@kohelet910]

CSS:has(Amazing-features) 😃 Thx for this really cool video

[@BGdev305]

@WebDevSimplified would love to see more in depth usage of this. Simply because this is powerful enough to remove the need for JS in alot of frontend "design" where one normally needs JS. For example, does this work well with the new CSS Transformations.. Animations?

[@PadmanabanScrazy]

Please explain about BEM CSS methodology

[@michelaveline]

Super great!

[@rahee3036]

Hello Sir! I would like you to make a video on, how to make a responsive website using flex-box or grid-box. Also, I have a question for you, "Is Media Query is always needed to make a fully responsive website?". Thank You. ❤️

[@IrvineMesa]

yes media query will tell the browser what contents to display at different screen size

[@TheNatanie]

Hiya, your channel helps a lot! I am only starting my path as a web developer, and I'm happy there is a place to find answers to my questions. So my first web-related question on this channel will be: dooo you have a girlfriend?:)

[@padumasu6241]

haha😂

[@m1lk1way1]

the only con is that all css selectors work from the end and first it selects all "p" on the page and only after it narrows result relative to the given parent. It is very slow, that's why to have a classes everywhere is the best practice, just not to force browser do this extra kind of work.

[@webstercho]

Firefox likes this tutorial 😄

[@Nipaska1]

Make tutorial video about background images maybe

[@ruthang9065]

2:24 HEY HEY, WHAT ARE YOU DOING?

[@whatsapp176]

Helpline 📲📩⬆️ Questions can come in⬆️

[@antonigari7003]

On the dark mode example, what if you want to have both body and card change, do you just write two :has?

[@cyberprompt]

what we need is a :had selector where a child can check if a parent "had" some value, or at least I do since we have situations where during authoring a parent is given inline styling but no new class. so I guess it's still just js for that. and before you ask, no we can't just always request new classes for all situations in a corp CMS environment.

[@avoerman89]

Seems like a performance nightmare - browsers would have to track the state of every dom change

[@cyberprompt]

@@avoerman89 i'm not talking about past values. i'm saying to easily target a parent element's style value. ie: .parent:: has('color: #ccc') .target { color: #fff }

[@cyberprompt]

@@avoerman89 :had would not be a temporal thing, it's the opposite of :has, to the parent, not the child. Like if you wanted to get the style information in JS of a child's parent but in css only.

[@codesymphony]

selector has amazing applications, but I feel like it would have super resource intensive performance?

[@sidneijunior86]

I'm learning English and web with your videos. It's very cool indeed!

[@whatsapp176]

Helpline 📲📩⬆️ Questions can come in⬆️

[@VladDubovyi]

We are waiting for :is :where 😀

[@afzalbd1]

Great

[@ojichukwuedwin4725]

Great!

[@TomasMisura]

i haven't had any idea this selector already exists. css becomes more and more complex and it seems tries to adopt some javascript features

[@dopecello8670]

Can it select my aunts and uncles too?

[@TechTalentHive]

I have a doubt in hover function. Which is the best CSS or Java Script for mouse hover action ?

[@mrbsreevijayan8115]

I'm having some troubles in my html could you help me with it

[@Mackin7777]

I'd argue that for example #1, using block element modifier instead of a nested :has makes it more readable and obvious what's going on when looking purely at the markup.

[@oldclient]

New functions has(), is(), not(), where() in combination with calc(), var() and sudo selectors have a huge impact on CSS like Flex and Grid did before. It's a clean and compact architecture to use while choosing between it and Bootstrap, MUI, Tailwind. I did a bunch of tests and its potency is huge.

[@mtime6648]

Without it i had used javascript to do or i had to change the position of the elements for the sake of CSS selectors

[@rammah]

Nice video

[@romanmed9035]

"has" firefox suuport after on in settings. but "has" is progreessive as "flex".

[@whatsapp176]

Helpline 📲📩⬆️ Questions can come in⬆️

[@dasten123]

still not supported in Firefox... what are they doing?!

[@whatsapp176]

Helpline 📲📩⬆️ Questions can come in⬆️

[@davidturkadze457]

has() selector is great, but Firefox does not support it!

[@MrGuillermolago]

It will be supported starting on December 19th!

[@skylerjknight]

Can't wait until this is fully supported... It's gonna be sick

[@andrew0_29_0]

Cool

[@fzq8064]

nice

[@felixpaniagua6018]

Can we use it in production yet?

[@luislourz]

You can, though you will need to provide fallbacks with CSS and JS.

[@felixpaniagua6018]

@@luislourz nice

[@settahkader]

not supported with firefox

[@urbaniv]

A great channel but the room looks as you are imprisoned in a cellar and forced to do YT 😂

[@mojorochi]

Not sure I'd like putting random things inside of my "has"

[@LV4EVR]

Firefox ... ☹

[@PaulSebastianM]

".box:has(div) p" should be equivalent to ".box > div p" because once you're not targeting the parent, but add a second selector like that (p in this case), you don't need :has. That's at least how it seems, I haven't tested this. :D

[@dasten123]

nope, in your example without the :has, the must be nested inside the , but it could be a sibling to the div. Plus, in the example with the :has it doesn't matter if the is a _direct_ child of .box

[@whatsapp176]

Helpline 📲📩⬆️ Questions can come in⬆️

[@Atlent112]

It's been 7 months, and Firefox is still blocking it for whatever reason, eh...

[@ironsand]

I love real world examples, because they don't ever have semantic HTML tags. 🤣

[@MailDeliverySystem-xw6hh]

"If my body has a toggle box between dark and light mode" ~WDS 2022.

[@whatsapp176]

Helpline 📲📩⬆️ Questions can come in⬆️

[@Nodsaibot]

HAS is not really a parent selector, for its not AGNOSTIC, you MUST know what the parent is

[@harmez7]

hi Kyle, do you still wake up at 5 ?

[@telesohbet]

Jquery had this since 2008

[@ultimapanzer]

.dad:has(.goneoutforcigarettes)

[@mrbsreevijayan8115]

I'm having some troubles in my html could you help me with it

[@mrbsreevijayan8115]

I'm having some troubles in my html could you help me with it

[@wassupdoc7742]

One thing to notice is firefox doesn't support the has pseudo class

[@whatsapp176]

Helpline 📲📩⬆️ Questions can come in⬆️

[@Igor-ge1py]

Yup you’re right. Only 76% of the internet users would be able to use this. I’m a couple years should be good.

[@aram5642]

Wouldn't this be a workaround for the specificity combinator? .box:has(:where(.p1, #p2))

[@whatsapp176]

Helpline 📲📩⬆️ Questions can come in⬆️

[@MuhammadAdnan2.0]

Can we target child:has(parentDiv) ?

[@whatsapp176]

Helpline 📲📩⬆️ Questions can come in⬆️

[@BigJim777]

can you do :has not

[@pranavwani]

Awesome 😎