This Is So Much More Than Just A Parent Selector

Рет қаралды 43,428

Күн бұрын

CSS has been cranking out new features left and right recently and one of the coolest features to release recently has been the :has selector. This selector works like a parent selector in CSS, but it much more powerful than a simple parent selector. In this video I talk about how this selector works while also going into multiple advanced real world examples of why this selector is so useful.
📚 Materials/References:
:has Selector Article: blog.webdevsimplified.com/202...
Specificity Video: • Learn CSS Specificity ...
Specificity Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:32 - How :has works
03:36 - Real world example #1
05:15 - Real world example #2
06:51 - Real world example #3
09:06 - Advanced :has usage
11:49 - Browser Support
#CSS #WDS #CSSParentSelector

Пікірлер: 102

@aryavbhola3066 Жыл бұрын

I never knew we had a parent selector

@mavdotj Жыл бұрын

Because your adopted /j

@mavdotj Жыл бұрын

@@321b_productions 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!

@Hasan23 Жыл бұрын

Thank you for explaining this thoroughly!

@jenstornell Жыл бұрын

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

@joyvideos1802 8 ай бұрын

many usage of this has selector. THanks lot😊

@devkasunlakshitha Жыл бұрын

Thank you so much for these tips. Awesome! ❤

@Yawarr Жыл бұрын

Thank you, great quick explanation.

@anaselhassani2545 Жыл бұрын

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

@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!!! 🤯

@rpf23543 Жыл бұрын

very nice stuff, thank you!

@RaymondFishSC2 Жыл бұрын

Great video!

@chezchezchezchez Жыл бұрын

Brilliant! Thx!

@sajjadkazemi Жыл бұрын

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

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@dominicanfrankster Жыл бұрын

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

@sidneijunior86 Жыл бұрын

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

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@clevermissfox 8 ай бұрын

Bw Web Dev Simplified and Kevin Powell, us KZfaq 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

@alagunoff Жыл бұрын

Thanks!

@bijintsy Жыл бұрын

Thank you ...

@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?

@michelaveline Жыл бұрын

Super great!

@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.

@Mmg123-masked12G Жыл бұрын

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

@PadmanabanScrazy Жыл бұрын

Please explain about BEM CSS methodology

@pranavwani Жыл бұрын

Awesome 😎

@ojichukwuedwin4725 Жыл бұрын

Great!

@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⬆️

@MichaelOwens1972 Жыл бұрын

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

@webstercho Жыл бұрын

Firefox likes this tutorial 😄

@TechTalentHive Жыл бұрын

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

@MailDeliverySystem-xw6hh Жыл бұрын

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

@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?

@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

@afzalbd1 Жыл бұрын

Great

@rammah Жыл бұрын

Nice video

@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.

@Nipaska1 Жыл бұрын

Make tutorial video about background images maybe

@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?

@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

@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😂

@BigJim777 Жыл бұрын

can you do :has not

@ruthang9065 Жыл бұрын

2:24 HEY HEY, WHAT ARE YOU DOING?

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@andrew0_29_0 Жыл бұрын

Cool

@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.

@dopecello8670 Жыл бұрын

Can it select my aunts and uncles too?

@kohelet910 Жыл бұрын

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

@fzq8064 Жыл бұрын

nice

@aram5642 Жыл бұрын

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

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@felixpaniagua6018 Жыл бұрын

Can we use it in production yet?

@luismiguelcarrionsantamari5390 Жыл бұрын

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

@felixpaniagua6018 Жыл бұрын

@@luismiguelcarrionsantamari5390 nice

@settahkader Жыл бұрын

not supported with firefox

@MuhammadAdnan2.0 Жыл бұрын

Can we target child:has(parentDiv) ?

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@user-es2vr3cv1v Жыл бұрын

We are waiting for :is :where 😀

@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

@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.

@dasten123 Жыл бұрын

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

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@romanmed9035 Жыл бұрын

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

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@skylerjknight Жыл бұрын

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

@davidturkadze457 11 ай бұрын

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

@MrGuillermolago 6 ай бұрын

It will be supported starting on December 19th!

@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⬆️