Simplify Your CSS using :is() and :where() Pseudo-Selectors

Discover the power of CSS :is() and :where() pseudo-class selectors in this CSS tutorial. Dive deep into the advanced CSS selectors, understanding why they're known as forgiving selectors and the nuances that set them apart. Learn how to leverage the :is() selector to apply styles to elements that match any of the provided selectors, simplifying your CSS code and enhancing readability. Explore the flexibility of the :where() selector, allowing you to apply styles to elements based on conditions specified in the selector list.
Uncover the differences between :is() vs :where() pseudo-class selectors and gain insights into when to use each one effectively in your projects. With practical examples and clear explanations, you'll master these powerful selectors and elevate your CSS skills.
Don't forget to like, share, and subscribe for more web dev tutorials.
Related Topics
-----------------------------------------------------
- How you can simplify your CSS with :is()
- The new CSS pseudo-classes explained :is() :where()
- :where - CSS Pseudo Selector Explained
- :is - CSS Pseudo Selector Explained
Chapters
-----------------------------------------------------
00:00 Intro
00:48 Conventional approach of CSS selectors
01:04 :is() pseudo-class selector
01:35 :where() pseudo-class selector
01:56 Forgiving selectors
02:55 Difference between :is() and :where() pseudo-selectors
Subscribe and never miss a beat
-----------------------------------------------------
🔔 Subscribe for more videos like this: www.youtube.com/@OptimisticWe...
Learn at your own pace
-----------------------------------------------------
- Learn HTML - • HTML
- Learn CSS - • CSS
- Learn JavaScript - • JavaScript
Connect, share, and grow
-----------------------------------------------------
- TH-cam: / @optimisticweb
- X (Twitter): / optimisticweb
- Instagram: / optimisticweb
- Facebook: / optimisticweb
- CodePen: codepen.io/optimisticweb
#css #cssselectors #cssselector #iscssselector #wherecssselector #webdesign #cssmagic #csstutorial #html #cssforbeginners #webdevtutorial #learncss #optimisticweb

[@integrateur]

Thanks for the clarifications!

[@OptimisticWeb]

You're welcome!

[@zoetje9817]

At the end you say that because the :where() and :is() psuedoclasses differ in their specificity, it allows us to create more readable code. Can you give an example? It seems, to me, that it would mostly cause confusion and/or unintuitive code.
I could see some uses for CSS applied through classes toggled by JavaScript, as well as ways to reduce file sizes though. Definitely useful.

[@OptimisticWeb]

Thanks for the feedback! To clarify, the readability and maintainability aren't solely due to the specificity difference between :is() and :where(). Rather, it's about how these pseudo-class selectors can enhance code organization and clarity. They allow for more concise and intuitive styling, especially in complex scenarios. I was summarizing the video at 03:47, outlining their benefits, and when/how to use these selectors effectively. Both :is() and :where() contribute to writing cleaner, more maintainable code. Hope this helps.

[@zoetje9817]

@@OptimisticWeb
Ah, then I misunderstood that part of the video. Thanks for the quick clarification!

[@OptimisticWeb]

No problem at all! Glad I was able to provide some clarity.

[@maybe22days]

Awesome content, thanks.

[@OptimisticWeb]

Appreciate your feedback.

[@mkwise5996]

Great video

[@OptimisticWeb]

Thank you! Appreciate your feedback.

[@rcarias78]

how do you use the :is and where with the not selector (or other pseduo ones)?

[@OptimisticWeb]

You should be able to chain the :not() pseudo-selector with the :is() function, like ":not(:is(p, span))". However, it will be the same as using ":not(p, span)". It depends on what you want to achieve and don't forget that specificity also plays its part.
You can also watch our short video on :has() pseudo-selector (th-cam.com/users/shortsYoCm92KofDc) where we combined the uses of :not and :has to style navigation.

[@rcarias78]

@@OptimisticWeb thanks for the response. I’ll check out the suggestion link ! Look forward to more content

[@ramadandk9886]

I hope you will make full course vidio aboit html,css and javascript

[@OptimisticWeb]

Thank you, you are the second person showing an interest in a course.

[@darshanjadav510]

waiting for next video sir

[@OptimisticWeb]

Sure, the next video is scheduled for Tuesday. Stay tuned 👍

[@darshanjadav510]

@sticWeb how to link html pages plz video upload sir

[@OptimisticWeb]

You can use the HTML anchor tag to link pages.

[@Abiram77]

Hey what about Devin

[@OptimisticWeb]

AI world is having pretty decent advancements these days, but, I don't think we are at a stage where human jobs can entirely be replaced.

[@JawsoneJason]

Really wish this wasn't AI-voiced

[@OptimisticWeb]

I hope the content itself makes up for it :)