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)
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.
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.
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 🖤
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
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.
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; }
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.
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.
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.
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!
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; }
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 :)
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.
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.
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; }
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.
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
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 😀
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.
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.
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!
"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.
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.
@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
'adjacent' means immediate neighbour in ANY direction . Also I think a function like notation would be preferable , like prev(starting_point, optional_selector). What do u think?
I find the name a little strange as well, but it's what they went with so 🤷♂️. That could be interesting... not sure we'll be getting anything like that though.
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
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.
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!
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".
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.
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
@@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 :)
@@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.
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.
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.
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.
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)
Good point. I wish I could add notes to videos after the fact :\ - Pinning this will have to do :)
I was confused by that as well, but it was later clarified at 8:26
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 :)
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.
Wouldn't that be a interesting case study:
Optimizing your own site without changing it visually?
Could be a fun video series.
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 .
where have you reached currently in web dev
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.
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.
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.
I'm starting to love CSS again, thanks to this channel.
CSS can be so easy with your tips. What have I tinkered to get such simple things done. Thank you so much.
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 !
Life-changing from now on. Thank you ever so much, Kevin.
Learned about this from your Conquering Responsiveness course and have been using it frequently since.
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 🖤
Hi Kevin, today I tried the '+' combinator-selector in my project. Thats working perfect and handy to use. Great. Thanks for this video.
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
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.
Thanks so much for your awesome content! I've always been pretty intimidated by CSS but you teach it in a super approachable way :)
Great video as always. I didn't know the adjacent combinator and I'm already playing with it. Thanks again.
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;
}
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.
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.
Thank you so much. Watched this on Tuesday, was working on a project on Thursday and it came in so handy!
Awesome video Kevin! thanks a lot for sharing!
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.
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!
You are god tier. Like seriously, this stuff is incredible. I'm loving the owl thing 🙂
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;
}
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 :)
so great to see .. i was always using :first-child and :last-child to eliminate that unneccessary spacing - love your solution 👍
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.
Wow this is a perfect tutorial on CSS selectors. Loved it 😍
Did I just get a little misty-eyed when you said "LLLLLOVE this so much" about the lobotomized owl selector?
Nice!!!! Thank you for sharing XOXOXOXOXO! CSS selectors rock, and any form of shortened code is always helpful when writing clean code.
I really enjoy your CSS videos
Thank you. Such a great video and you break items down so we can understand them. Thank you. Thank you. Thank you.
This is a GOD level trick! Thank you for this one and all the vids before this too.
Awesome tricks... :) thanks for all of your super shortcuts to simplify our work great job tons of love...:)
14:04 What font used on vscode?
This is totally a High-Quality Premium Content! Thanks Kevin!
Very interesting. I didn't know this combinator but it's very useful. Great.
Holy, that's so amazing -- I love it
Awesome! Thanks for making another super useful video 😃❤️
Super thanks! That ".date +p" introduces a whole new parallel universe to play with. 👍
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.
Great video as always!
To pronounce specificity, try breaking it into two words with a pause in between... "speci"... "ficity".
Works for me.!👍
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.
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; }
Cracking video Boss, really interesting and I look forward to going through your back catalogue to see what else you've covered. :D
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.
When I saw the title, I was like: it has to be the plus one 😁
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
Thanks for this Kevin, something to think about.
Ooh, smart. I like. You could combine it with anything, e.g. after a pull quote, after a picture, and so on.
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.
Great content as always. Lots of love from India
Spess-eh-ficity :) Thanks for the vid!
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. 😄
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 :)
Ooops, didn't catch then when I was editing either 🙃
Love this so much. Also, SPESSY FISSY T is how I remember it.
I can say it really slowly and get it right. As soon as it's in a sentence, it's spessy fissy sissy t 😅
Amazing as ever, thank you
I totally geeked out to this...
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. 😉
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 😀
I learned about this in a Gatsby course i took but i didnt know the name. Thanks a lot!
Lobotomized Owl tee! That's what the masses want.
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.
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.
Amazing tutorial! But why is the CSS file over 1000 lines long??
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!
"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.
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.
@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
thank you so much for sharing with us
this is pretty cool for making a navigation bar
Wow! Thank you!
Thank you so much for this informative video~~ 😃 Wish you well~!!
Great hack! Didn't know about it - I'm definitely going to use it :)
The Adjacent Sibling Selector... I see... Nice abbreviation.
12:06 is literally reinventing the ::first-letter, ::first-line and :first-child or :first-of-type selectors (especially that last one), isn't it?
'adjacent' means immediate neighbour in ANY direction .
Also I think a function like notation would be preferable , like prev(starting_point, optional_selector). What do u think?
I find the name a little strange as well, but it's what they went with so 🤷♂️.
That could be interesting... not sure we'll be getting anything like that though.
Do you have a video how customize an input checkbox, generally in a context of a dark mode?
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
P.s. if you read this, you added the wrong link in the description
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.
Thanks, Kevin.
Nice trick * + * Kevin ;) thanks
Great video!
thank for the tips very cool
thank you, that was useful. subbed ~
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!
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".
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.
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
@@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 :)
@@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.
Kevin, which vs code colour theme are you using here?
General sibling combinator (~) is very handy too.
I love that one, but don't find I use it as much :)
Great tips
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.
What is the inspector window below your code?
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.
Please put sections for times that you say, "specificity," in future videos. Thanks.
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.
good guy Kevin :)
Amazing sir you are best
ur awesome Kevin
Flexing on us with that RUclips plaque
Super cool 😎
may I know the font used?
Hello. One question..
In SASS project , is necessary use var function. Or just vars SASS?
Thank you so much!,
Kevin can you please do a tutorial on frontend mentor's bg pattern placing i'm really struggling to palace bg pattern in place please please do it