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

Create a simple product filter with CSS by using pseudo-classes like :not() :has() and :checked. The not pseudo-class will allow you to exclude elements from a selector. The has selector is basically a parent-selector in css that allows you to select elements based on other html elements. You are also going to learn about the css attribute selector to check if a certain option in a dropdown is checked. And for that you learn about the :checked selector too.

Become a Member to Support our Channel:

*Put your own website online*

Concepts in this video:
How to use css not pseudo-class
How to use css has pseudo-class
:not(:has()) css
css not selector
css has selector
css :checked selector
How to check if a dropdown option is selected
How to check if option is checked
css pseudo-classes tutotial for beginners
How to create a css only filter
How to create a online shop product filter dropdown with css only
shoe store website filter with css only
How to use the attribute selector in css
How to check for the value of an html attribute in css
How to show and hide products
Filter products with CSS
Use complex CSS selectors
How to select a parent element
select parent div in css
css parent-selector
How to not select certain elements in css

Main Topics
1. Learn CSS has selector for beginners
2. Learn CSS not selector for beginners

Other topics of this video
HTML, CSS, No JavaScript required, CSS only Filter, CSS not, CSS has, selectors, pseudo-classes, beginner Tutorial, english, css not has, checked pseudo-class, checked selector, dropdown filter with css only, online shop product filter with css only, css only, How to use :not() and :has() pseudo-classes in css. Practical example for not and has selector, web development, web dev, coding2go, beginner tutorial, code example for not has css

Background Music in the video:

Track: "Take Off", NEFFEX

Track: "Little Things"

Track: "Scared Of The Glizzy"

[magmamax]

I've learn more with your videos that everything that teach me back in college. Thanks you sensei

[ameencoding]

I thanks youtube for showing me such a channel like this.

Many thanks fabian 🙌🥰

[manfromexistence]

Very helpful video, I almost don't have much motivation to learn about these CSS selectors. Thanks

[AliBilal-cb]

please don't stop continue
thank you sir

[Escko]

This is really excellent Fabian, thank you!!!

[josemanuelgonzalez]

Thanks for sharing this awesome knowledge and amazing skills! Really cool, powerfull and useful CSS only coding!

[goxyazk]

Great channel! Very well done explanations!

[inteltone]

Thanks a lot for this video. It really helped!

[EyadMohamed-ynpy]

Thank you, please continue even if you don't get views❤❤

[waleedbinshabbir]

I really like your videos, very informative.

[Programmerevangadi]

You know what you are better than keven Powell keep it up bro

[abrowndude]

wow this is very useful thank you so mush!

[savan-kumar-sk]

Wow 😲👍
Css is Programming language now😂
Great Work 👍👏🥳🥳

[Pawfessor]

my "Liked Videos" playlist are full of your videos😂❤

[akastewart]

Cool proof-of-concept, but really on suitable for scenarios where every product is loaded into the page by default — i.e. no pagination that requires DB/server calls. So, while the demo is cool, the technique likely has limited utility in those scenarios in reality.

For scenarios where the number of products/items presented is low enough to not need pagination, the list is likely sufficiently quick and easy to navigate that filters become slightly redundant.

/thinking-out-loud

[pyx]

your videos are very helpfull❤.
Can you make a video about "isolation: isolate" property in css.

[rdcasual]

Thank you so much sir but had a question, where do you read all these new information and knowledge ?

[facilvenir]

Not sure if you're going to read this, but I ask: is it better to use only HTML and CSS rather than JS??

[IdreesAmoo-ix]

Please do provide link to your images and other materials used in your tutorials for one to follow

[PicSta]

Could share a CodePen or source code on the website? Would be great. Amazing tutorial as always. Never thought you could achieve that with CSS only.