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!
Bw Web Dev Simplified and Kevin Powell, us UA-cam 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
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.
@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?
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. ❤️
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?:)
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.
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 :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.
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.
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.
".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
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
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!
oh my god, we've been waiting for this selector for almost 10 years! thanks for the video and detailed explanation
Bw Web Dev Simplified and Kevin Powell, us UA-cam 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
This selector will simplify the web a whole lot. Great examples!
This form thing has just f***ing blew my mind! Thank you so much!!! 🤯
I never knew we had a parent selector
Because your adopted /j
@@321sas ok
@@mavdotj 😂 good one
@@mavdotj I laughed 😅
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).
I tried looking at the MDN docs and they did not do a good job explaining this. Thanks for the video!
many usage of this has selector. THanks lot😊
Thank you for explaining this thoroughly!
I'm learning English and web with your videos. It's very cool indeed!
Helpline 📲📩⬆️
Questions can come in⬆️
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.
finally we can highlight a row when hover on a cell in a grid without js :)
Thank you, great quick explanation.
Thanks for the tutorial, it's much faster than any other method I came across.
I'm super excited for 'has' to get more adoption so I can finally use it outside of hobby projects!!
Thank you so much for these tips. Awesome! ❤
God bless you , I just learnt the thing i was looking for since months ago😍
Helpline 📲📩⬆️
Questions can come in⬆️
Thank you ...
Thanks!
very nice stuff, thank you!
Great video!
Brilliant! Thx!
@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?
I had been doing css for years( I stopped recently), and this was something i dreamed of day and night 😭
Helpline 📲📩⬆️
Questions can come in⬆️
11/22/2022 Has selector is 82.92% accepted. woot!
Please explain about BEM CSS methodology
Firefox likes this tutorial 😄
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. ❤️
yes media query will tell the browser what contents to display at different screen size
Super great!
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?:)
haha😂
CSS:has(Amazing-features) 😃 Thx for this really cool video
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.
Make tutorial video about background images maybe
On the dark mode example, what if you want to have both body and card change, do you just write two :has?
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.
Seems like a performance nightmare - browsers would have to track the state of every dom change
@@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 }
@@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.
Can it select my aunts and uncles too?
can you do :has not
One thing to notice is firefox doesn't support the has pseudo class
Helpline 📲📩⬆️
Questions can come in⬆️
Yup you’re right. Only 76% of the internet users would be able to use this. I’m a couple years should be good.
selector has amazing applications, but I feel like it would have super resource intensive performance?
I have a doubt in hover function. Which is the best CSS or Java Script for mouse hover action ?
I'm having some troubles in my html could you help me with it
2:24 HEY HEY, WHAT ARE YOU DOING?
Helpline 📲📩⬆️
Questions can come in⬆️
Great!
Great
Awesome 😎
We are waiting for :is :where 😀
Can we target child:has(parentDiv) ?
Helpline 📲📩⬆️
Questions can come in⬆️
Wouldn't this be a workaround for the specificity combinator? .box:has(:where(.p1, #p2))
Helpline 📲📩⬆️
Questions can come in⬆️
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
still not supported in Firefox... what are they doing?!
Helpline 📲📩⬆️
Questions can come in⬆️
Without it i had used javascript to do or i had to change the position of the elements for the sake of CSS selectors
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.
Can we use it in production yet?
You can, though you will need to provide fallbacks with CSS and JS.
@@luislourz nice
not supported with firefox
"has" firefox suuport after on in settings. but "has" is progreessive as "flex".
Helpline 📲📩⬆️
Questions can come in⬆️
Nice video
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.
Cool
Can't wait until this is fully supported...
It's gonna be sick
nice
has() selector is great, but Firefox does not support it!
It will be supported starting on December 19th!
Firefox ... ☹
HAS is not really a parent selector, for its not AGNOSTIC, you MUST know what the parent is
A great channel but the room looks as you are imprisoned in a cellar and forced to do YT 😂
".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
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
Helpline 📲📩⬆️
Questions can come in⬆️
Not sure I'd like putting random things inside of my "has"
hi Kyle, do you still wake up at 5 ?
It's been 7 months, and Firefox is still blocking it for whatever reason, eh...
I love real world examples, because they don't ever have semantic HTML tags. 🤣
Jquery had this since 2008
.dad:has(.goneoutforcigarettes)
I'm having some troubles in my html could you help me with it
I'm having some troubles in my html could you help me with it