ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- 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: coding2go.com
👉 Get our HTML beginner course: www.udemy.com/...
Put your own website online
👉 Get the best web hosting here: www.hostinger....
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 Slip.stream
Free Download/Stream: get.slip.strea...
Listen on Spotify: go-stream.link...
Track: "Little Things"
Music provided by Slip.stream
Free Download/Stream: get.slip.strea...
Track: "Scared Of The Glizzy"
Music provided by Slip.stream
Free Download/Stream: get.slip.strea...
![[Re:all TREASURE] EP.6 in 방콕ㅣ🚩 쩡캠의 방콕 투어 빵 마이 와이 👍](http://i.ytimg.com/vi/uyFw-nItA_s/mqdefault.jpg)
I see what you did there: JS inside CSS. Keep up the great work.
Thanks, will do!
JS script video please
I've learn more with your videos that everything that teach me back in college. Thanks you sensei
Very helpful video, I almost don't have much motivation to learn about these CSS selectors. Thanks
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
You are absolutely right. The example was a fun little exercise to see what's possible with css only. The tutorial is meant to explain how these pseudo-classes work and not how to build a feature like that in a real project. Thanks for pointing that out ✌️
Great work man😊
Thanks 😁
Thank you , please continue even if you don't get views❤❤
Was this a compliment? 🤔😶
he would reach there someday, you guys can spread his videos
I thanks youtube for showing me such a channel like this.
Many thanks fabian 🙌🥰
DAMN! That's insane!
Wow 😲👍
Css is Programming language now😂
Great Work 👍👏🥳🥳
Interesting as always 😊
please don't stop continue
thank you sir
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.
You know what you are better than keven Powell keep it up bro
Great channel! Very well done explanations!
Thank you very much!
Thanks a lot for this video. It really helped!
This is really excellent Fabian, thank you!!!
Glad you like it!
And my-favorite.css file is better!
my "Liked Videos" playlist are full of your videos😂❤
your videos are very helpfull❤.
Can you make a video about "isolation: isolate" property in css.
bro please don't stop
wow this is very useful thank you so mush!
I really like your videos, very informative.
I appreciate that!
can you do scroll() or view() content next?
Can we demonstrate how no and has work from scratch step by step
Very nice but assumes that a keyword is unique among all dropdowns. Would id make more sense to use "#color option:: rather than just option?
Yes, selecting the option using its id would be a safer approach.
Java script complete explanation please
Hi
So what was I learning JS for then... 🙂 I see that I have to "learn properly" modern CSS...
It sure doesn't hurt to learn both. JavaScript is a powerful programming language that you should definitely continue learning, but modern CSS is getting increasingly more powerful too :)
you should know about something to avoid that :P
Sir i have a problem from many months that is....i have problem in understanding that in which div we have to give flex for example: i have 2 div a container and a logo div now i have to center a logo then to which of one div should be given flex box.....Its so confusing for.me pls Sir reply me and pls make more advance vids for css
Suppose we create a parent div and inside it two child div then we need to give flex property, align-items:center and justify content: center, to make child div go to center, so keep this in mind whenever you want to manipulate position of div, give flex to it's parent and other efficient properties..... Hope this meets your expected solution
@@Rohan-hx7ry thank u very much bro 🤩
@@Rohan-hx7ry bro my live server is not working properly what can be the problem
@@chetankalania4709 bro i don't know about this, I have heard people have this problem often but but don't know the solution, maybe try reinstalling vs code and do it while watching a vscode installation tutorial
parents should be flexible in positioning their chilren :)
but you repeat yourself A LOT, and now imagine we want to scale this to multiple brands, many more colors.... that's why react and techs like that were created, plus I'm not pro of CSS, but probably you can do this exact same thing without repeating that much the same code only changing a value
A subscriber is looking for source code (Me)
just type bro, you will never forget it