The one CSS combinator I use in every project

While all the combinators are useful from time to time, but the adjacent sibling selector is easily the one I use the most often. It has a several really good uses, a few of which I'll be diving into in this video!
Do you have a combinator that you use a lot? Let me know in the comments :D
Heydon Pickering's * + * - alistapart.com/article/axioma...
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
---
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: / 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 KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / 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 awesome!

[@facundocorradini]

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)

[@KevinPowell]

Good point. I wish I could add notes to videos after the fact :\ - Pinning this will have to do :)

[@Berkeli]

I was confused by that as well, but it was later clarified at 8:26

[@DerSolinski]

Wouldn't that be a interesting case study: Optimizing your own site without changing it visually? Could be a fun video series.

[@souhardabiswas970]

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 .

[@charlestoneoyoo]

where have you reached currently in web dev

[@harleyspeedthrust4013]

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 :)

[@ThiagoVieira91]

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.

[@TomLeg]

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.

[@ShawnRitch]

This is a great example of the adjacent selector. I had seen it used before in examining code but never really knew what it was doing until now. I can see myself using it within my own little framework I have been creating. Thank you for sharing all your knowledge - it's greatly appreciated :)

[@jennifermagpantay7933]

Life-changing from now on. Thank you ever so much, Kevin.

[@alexandercai4081]

Thanks so much for your awesome content! I've always been pretty intimidated by CSS but you teach it in a super approachable way :)

[@beachhouse13]

Thank you so much. Watched this on Tuesday, was working on a project on Thursday and it came in so handy!

[@gabuhl9509]

Awesome video Kevin! thanks a lot for sharing!

[@DiegoDiaz-uz2vg]

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

[@mikebailey783]

I'm starting to love CSS again, thanks to this channel.

[@Drunkdrgonzo]

Cracking video Boss, really interesting and I look forward to going through your back catalogue to see what else you've covered. :D

[@markuskopter]

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; }

[@luiscolome75]

Great video as always. I didn't know the adjacent combinator and I'm already playing with it. Thanks again.

[@justyna6134]

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 !

[@comradecid]

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 🖤

[@jvenkatonline]

Hi Kevin, today I tried the '+' combinator-selector in my project. Thats working perfect and handy to use. Great. Thanks for this video.

[@dave6012]

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.

[@BlockCylinder]

Did I just get a little misty-eyed when you said "LLLLLOVE this so much" about the lobotomized owl selector?

[@tim_t]

Learned about this from your Conquering Responsiveness course and have been using it frequently since.

[@DoDisturbedTv]

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.

[@abdishakur2489]

Wow this is a perfect tutorial on CSS selectors. Loved it 😍

[@PhilipJones]

Thank you. Such a great video and you break items down so we can understand them. Thank you. Thank you. Thank you.

[@benzflynn]

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.

[@3-dog-solution]

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!

[@andreaskarz]

CSS can be so easy with your tips. What have I tinkered to get such simple things done. Thank you so much.

[@liamia8482]

Nice!!!! Thank you for sharing XOXOXOXOXO! CSS selectors rock, and any form of shortened code is always helpful when writing clean code.

Awesome! Thanks for making another super useful video 😃❤️

[@andreaskarz]

Holy, that's so amazing -- I love it

[@ChillCityNaveen]

Awesome tricks... :) thanks for all of your super shortcuts to simplify our work great job tons of love...:)

[@gdashish]

This is a GOD level trick! Thank you for this one and all the vids before this too.

[@DreQueary]

You are god tier. Like seriously, this stuff is incredible. I'm loving the owl thing 🙂

[@KyleMerl]

I totally could have used this for something i was working on yesterday!! I found another way around this but definitely going to keep this in my toolbox.

[@DanielTateNZ]

Cool video, a real use case for this is labels and inputs, often text inputs have labels before but checkboxes or radios have labels after.

[@kovtunos]

Good video, thanks. I'm constantly doing plus trick for horizontal and vertical menus and text paragraphs. But the trick with owls is great. I'll try to use it on the next project.

[@michelegiulietti5540]

Very interesting. I didn't know this combinator but it's very useful. Great.

[@obscurecult]

I really enjoy your CSS videos

[@peachesfruitella]

so great to see .. i was always using :first-child and :last-child to eliminate that unneccessary spacing - love your solution 👍

[@octothorpe12]

Ha! at 10:43 I ran into the *exact* issue three days ago where I had a vertical stack of stuff, then a nested horizontal stack for adjacent buttons. But that's exactly how it's supposed to work… Use the cascade to make your general purpose rules, then have 'exceptional' rules for stuff like this.

[@manuelcasares7270]

Yes, this is very useful also if you want to leave a gap in between every flex-child element except for the first one, like... .flex-container > * + * { margin-left: 1.5rem; }

[@carolmckay5152]

Thanks for this Kevin, something to think about.

[@nigelnix1]

Super thanks! That ".date +p" introduces a whole new parallel universe to play with. 👍

[@techwake360]

thank you so much for sharing with us

[@jonathanwalker2315]

Great video as always! To pronounce specificity, try breaking it into two words with a pause in between... "speci"... "ficity". Works for me.!👍

[@pandarzzz]

Thank you so much for this informative video~~ 😃 Wish you well~!!

[@DanielLiuzzi]

This is now my favorite selector too. Total game changer! Also, at 12:00 I think you meant Markdown not Markup. That threw me off for a bit :)

[@KevinPowell]

Ooops, didn't catch then when I was editing either 🙃

[@LetsCodeYTB]

Great video!

[@Ptaszqq]

Great hack! Didn't know about it - I'm definitely going to use it :)

[@PleoPleo1]

I learned about this in a Gatsby course i took but i didnt know the name. Thanks a lot!

[@Nutellagate]

thank for the tips very cool

[@untitled746]

Wrapping content that lives in the grid item with another container would reset the display, allowing margins to collapse again. I do that, then use that container to remove the top and bottom margins from the first and last child respectively. This allows my atomic level margins to be maintained. Short of needing another wrapper, which has been convenient for other reasons (aligning all the collapsed margin atoms and molecules as a single element) it’s been pretty painless. Love you videos! I’ll keep watching now :) I’m excited to try alternatives.

[@KevinPowell]

I did this to easily allow me to have things, like my intro, cta, code snippets, etc, to extend out an extra column. It was a bit of an experiment, and it totally depends on the needs, but since everything is done in markdown in this case, it's about the only way I could do it to achieve what I wanted to, and really the setup is that bad at all.

[@floraposteschild4184]

Ooh, smart. I like. You could combine it with anything, e.g. after a pull quote, after a picture, and so on.

[@malobuchino]

thank you, that was useful. subbed ~

[@njwebwiz]

I totally geeked out to this...

[@alexandervolkov9177]

Wow! Thank you!

[@s7s_space]

Nice trick * + * Kevin ;) thanks

[@eddilicious3025]

this is pretty cool for making a navigation bar

[@vivekchaugule2122]

Great content as always. Lots of love from India

[@farhan-app]

Awesome video! Future video request: Intro to Javascript/Javascript basics (just like the CSS selector video)..For example functions/toggling classes...

[@gavinMorrice]

Thanks for the video, Kevin. Just an FYI, some markdown systems (including Jekyll) use Kramdown, which allows you to set attributes for elements. This would allow you to add a class to a paragraph, like you mention at 12:22. ``` markdown Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. {:class=>"opening-paragraph"} ``` Check out the docs here: kramdown.gettalong.org/quickref.html#block-attributes

[@thebadjer8249]

Very interesting vid. I know very little about CSS but would love to learn more as I have started using Roam Research & finding it extremely challenging to use with little to no knowledge. Lot of it was beyond me only cause I have no knowledge but found the vid really interesting.

[@thebadjer8249]

@Kevin Powell do you have any vids for CSS for absolute beginners, whether you tube or a different resource? As I mentioned before I have joined Roam & am finding that a basic knowledge set would be helpful (not to mention I find it interesting :) ).Tried scrolling thru you extensive list but couldn't seem to ID one that would suggest that it might be geared for beginners TY in advance. Cheers

[@paulo-ingrevallo]

Great tips

[@Take-the-Ticket]

Spess-eh-ficity :) Thanks for the vid!

[@ShadiMuhammad]

I noticed that Kevin struggle to pronounce it since 2017.!! 😂 Anyways, I like him too much; He's the only one who made me love CSS. 😄

[@harishst202]

This is totally a High-Quality Premium Content! Thanks Kevin!

[@dariogeorge8680]

Thanks, Kevin.

[@berenjor]

Lobotomized Owl tee! That's what the masses want.

[@joeytje50]

Before watching this video, my guess is that your favourite is ~ or +. These give the ability to make CSS a turing complete language (in combination with HTML and user interaction). My faviourite is ~ for its use in CSS tab interfaces that create CSS-only tabs, e.g. #foo:checked ~ [data-tab="foo"] { display: block; }

[@alirahmani5601]

When I saw the title, I was like: it has to be the plus one 😁

[@brian554xx]

If you stumble past "specificity" with your grace intact, it's less distracting than dwelling on it. You're amazing, Kevin. Trust us to forgive your word stumbles more quickly than you forgive yourself.

[@Ana-mn5io]

Thank you so much!,

[@tanxyrogue847]

It's funny I've been running into this exact problem recently and I've had to handle it with :not(:first-child) this is definitely better, although it is less intutive but hey that's what comments are for 😀

[@jenstornell]

Great use case of the owl selector as well as the reason for using em and not rem between text blocks. Say specificity ten times fast. 😉

[@DaVince21]

The Adjacent Sibling Selector... I see... Nice abbreviation.

[@fuzzypumpkin7743]

I actually just used the + combinator to make it so that when I hovered on a headline, an image hidden behind the headline would pop out and animate.

[@tarakgandhi]

Amazing sir you are best

[@fev4]

Awesome!

[@joeldcanfield_spinhead]

Love this so much. Also, SPESSY FISSY T is how I remember it.

[@KevinPowell]

I can say it really slowly and get it right. As soon as it's in a sentence, it's spessy fissy sissy t 😅

[@yaldakarimi3772]

Amazing as ever, thank you

[@jcespinoza]

You know Kevin, this looks like a nice use case for the currently experimental logical properties... In this case, `margin-inline-start`. I think you wouldn't have had that issue with the input field.

[@KevinPowell]

Not quite the same thing. If you don't change the writing mode, the margin-inline-start will be the left margin I believe, and it's still on all of them. It isn't something I've got into much yet though, so I could be wrong here.

[@andrewrea2799]

Super cool 😎

[@GarethField]

Oh! Always have felt kinda silly managing that type of thing bit by bit, wow!

[@forchettinastaff2626]

YES! I love it... Gooo man! :) Just a little stupid question... I should know, but my mind getting older... Why you put a class ".article" to an article tag? Thanks... continue like that... Thumbs up!

[@ThiagoVieira91]

Usually I do the same because of third party libs and frameworks. Some of then write semantic tags in the DOM, which would conflict with our rules for "article". The same would not happen for ".article". Even better if we use a custom prefix, like".my_article".

[@KevinPowell]

I tend to put classes on everything :) - plus not all articles are "articles", so it's a way to distinguish as well. For example, normally the snippets on the homepage or main blog page are s as well, but you might want them styled differently.

[@miguelreymallen4599]

I want to add to the other responses that another reason to use classes like that is that css class selectors are more performant than type selectors. Anyways, the performance impact should not be relevant in most regular cases

[@forchettinastaff2626]

@@miguelreymallen4599 more performant? I understood the previous answers, but this one makes me a bit confused... How could be more performant adding classes and conseguently little bytes of code into the css and the html? Shouldn't be both files a little heavier? Thanks for the answer :)

[@miguelreymallen4599]

@@forchettinastaff2626 As you said having a class adds bytes into de html as is slower than not having a class, but only in the html parsing. On css some selectors are faster to parse than others, and class selectors are faster than type selectors. Anyways, the difference is so tiny that in most cases you should not worry about it.

[@iboro-kun84]

You're absolutely right. CSS combinator is "a little bit more awesome". But Mr Kevin, try to say specificity more slowly. Say it with me: SPE-CI-FI-CI-TY. Thank you.

[@itallovidal9383]

Kevin, thank you so much for the content

[@LuisReyes-zs4uk]

ur awesome Kevin

[@NZMPlays]

Great stuff Kev. Anyway you can fix my unending laziness and inability to sit down long enough to code anything? Lmk if you have a remedy for that lol.

[@merijnlioen5584]

I don't like the approach of * + *, I use a lot of flex and have to fix each part automatically. I also like to have more control. I think the CSS selectors 'not' and 'first-child' could be something interesting for you to research

[@merijnlioen5584]

P.s. if you read this, you added the wrong link in the description

[@KevinPowell]

Fixed the link, thanks :). I use the not and first child a lot. It's also great for navigations with borders in between each one, using a border-bottom, except on the last one. I do think overall, I prefer the * + *, but I think it's also project and situation reliant as well.

[@milosmiljevic1764]

good guy Kevin :)

[@MrsJaydot]

Lol, so even native English speakers stumble on spesss-whatsit 🙂. And as non native speaker I always thought adjacent meant the next one, not the one before! So I really learned a lot from this!! Thanks!

[@joeldcanfield_spinhead]

"Adjacent" just means "next to, in proximity to, near" so it can flow either way *in English.* In CSS, it throws me that it means "if an element has another element BEFORE it, the SECOND element should blah blah blah." I'm always thinking sequential, so it's hard to remember to go upstream/backwards.

[@Systemx93]

14:04 What font used on vscode?

[@elp1291]

Imo this selector should be used the least possible. It's exactly the kind of feature that'll VERY likely have unwanted side effects if not used in a completely controlled environment (a component for example). Also, I understand that not having access to a template sometimes happen (you gotta take those WP projects at some point), but this is nothing but a workaround for an issue that can't be solved in a clean manner.

[@Tikolu]

Amazing tutorial! But why is the CSS file over 1000 lines long??

[@wojciechszarlej]

General sibling combinator (~) is very handy too.

[@KevinPowell]

I love that one, but don't find I use it as much :)

[@kamertonaudiophileplayer847]

Do you have a video how customize an input checkbox, generally in a context of a dark mode?

[@ryanpearo9138]

Please put sections for times that you say, "specificity," in future videos. Thanks.

[@JohnMichaelMurphy13]

What is the inspector window below your code?

[@ErwinHeiser]

Kevin, which vs code colour theme are you using here?

[@robertomolinasilvera4863]

Thanks Kevin, good video. However, in css selectors level 4 it is changes to the "next-sibling" combinator.

[@KevinPowell]

Oh, that's an even better name for it 👍

[@alexalannunes]

Hello. One question.. In SASS project , is necessary use var function. Or just vars SASS?