The one CSS combinator I use in every project
106,637
Published 2020-06-17
Do you have a combinator that you use a lot? Let me know in the comments :D
Heydon Pickering's * + * - alistapart.com/article/axiomatic-css-and-lobotomiz…
0:00 - intro
1:20 - basic example
5:42 - lobotomized owl
12:04 - Uses with CMS's
#css
--
Come hang out with other dev's in my Discord Community
💬 discord.gg/nTYCvrK
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: www.patreon.com/kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: www.instagram.com/kevinpowell.co/
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awe
All Comments (21)
-
Great video! The adjacent sibling combinator is one of my favourites too :) Just a heads-up, at 2:58 you say that "(the element) doesn't have a div before it, it has the body tag", which may confuse some people as the selector is not looking for parents, only siblings. So the element doesn't have anything before it (i.e. using "body + .example" would still not select that element)
-
Wouldn't that be a interesting case study: Optimizing your own site without changing it visually? Could be a fun video series.
-
Your example with ".three + .example" is perfect. I never understood properly why people loved so much the + selector. Even less its use in the owl selector, * + *. Now it makes more sense.
-
It has been 3 months since I have started learning WebDev and if I understand a single bit of CSS , it's because of you . You're a gem .
-
Dude you have no idea how much these videos have helped me. I have gotten so much better at css because of them, thanks dude :)
-
I agree about using contrived examples to show how something works. On the other hand, using good coding practices in tutorials is sometimes the only source people have for how to do things right.
-
this is really useful for styling atomic ui component systems. typically, you'll be assembling many different combinations of granular re-useable elements (label + form field, form field + hint text, label + hint text, etc.), each of which has maddeningly case-specific rules regarding presentation and spacing. using this method, you can tackle all that without additional code, allowing you to simply plop elements in place and have them automatically look correct 🖤
-
Thoughtful vid. Combinators like that effective if we want to do things globally with common elements like
. Otherwise can use :first-of-type, :nth-of-type, :last-of-type where you have additional style classes for the element.
-
CSS can be so easy with your tips. What have I tinkered to get such simple things done. Thank you so much.
-
Learned about this from your Conquering Responsiveness course and have been using it frequently since.
-
Hey Kevin, you explain so lightly that I understand everything (and i don't have so so much experience with Css) - very good job ---> thank you !
-
Adjacent selector is my favorite. You can get very creative with like custom controls with hidden checkboxes, adjacent elements waiting for :checked state and labels that catch the click event, surrounding the whole block
-
Hi Kevin, today I tried the '+' combinator-selector in my project. Thats working perfect and handy to use. Great. Thanks for this video.
-
I really need to remember about the lobotomized owl. Wish I would have know about or thought of it before. That actually saves lots of time that I would otherwise spend creating resets/overrides.
-
I'm starting to love CSS again, thanks to this channel.
-
When you said you used to be a print designer that made a lot of sense. The layout and styling on your typography is always immaculate.
-
Did I just get a little misty-eyed when you said "LLLLLOVE this so much" about the lobotomized owl selector?
-
In our project we use tool classes like .lobo-y-m, .lobo-y-s, .lobo-y-xl and their respective x-counterparts on containers for added flexibility on where to apply spacing. Those can even be nested or combined if you need different spacings between elements. Works like a breeze! For example: .lobo-y-m > * . * { margin-top: 1rem; } .lobo-y-xl > * . * { margin-top: 2.618rem; } .lobo-x-s > * . * { margin-left: 0.618rem; }
-
THAT, .. was really really interesting. Whereas some of these technical videos can go on a bit, (not yours Kevin), this particular CSS + trick was extremely useful, to the point that even this thicko understood it. Well done!
-
Thanks so much for your awesome content! I've always been pretty intimidated by CSS but you teach it in a super approachable way :)
