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:
👉 / @coding2go
👉 Checkout our website: https://coding2go.com
👉 Get our HTML beginner course: https://www.udemy.com/course/coding2g...
Put your own website online
👉 Get the best web hosting here: https://www.hostinger.com/coding2go
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
Music provided by https://Slip.stream
Free Download/Stream: https://get.slip.stream/GcQeOy
Listen on Spotify: https://go-stream.link/sp-neffex
Track: "Little Things"
Music provided by https://Slip.stream
Free Download/Stream: https://get.slip.stream/QmMj1I
Track: "Scared Of The Glizzy"
Music provided by https://Slip.stream
Free Download/Stream: https://get.slip.stream/xPJ3rV
Watch video Learn CSS :not() and :has() selector in 6 Minutes online without registration, duration hours minute second in high quality. This video was added by user Coding2GO 17 July 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 12,213 once and liked it 916 people.