CSS Combinators You Need to Know  ## Metadata - Author: [[YouTube]] - Full Title: CSS Combinators You Need to Know - Category: #articles - Document Tags: [[video-notes]] [[youtube]] - Summary: CSS Combinators you need to know (and a selector too) - URL: https://www.youtube.com/watch?v=rndMS4pEKP8 Hello, my friend! My name isKevin, and here at my channel, I helppeople fall in love with CSS. And if Ican’t get them to fall in love with it,I’m hoping to at least help them be alittle bit less frustrated with it. Andone way we can do that is by stepping upour CSS game, getting past the basicselectors, like our elementselectors, class selectors, and ourID selectors, and diving into the worldof combinators. And so, to do that, we’regoing to be diving into demo land righthere where I have this demo set upfor CSS combinators. So, we’re goingto be diving in here. And first of all,I’m assuming you already know theseones. As I said, the element, class, andID selectors, and you’re ready to movepast those basic ones. If you’re notfamiliar with those yet, I’ll put a linkto a video in the description that willget you started with the basics. Uh, forthe first one, we’re going to be divingin here is our descendant selectors. Andthere are two types; we can selectall of our descendants or just thechildren, which is like the directdescendant, right? So, if we come andtake a look at the HTML here, I haveThis section has a class of children on it, and in there I have a whole bunch ofstuff. However, there are some paragraphsthat are children of or descendantsof that. So with the descendant selectorhere, these are all paragraphs that aredescendants of something with a class ofchildren. If we come on here and Isay this is a color of red, we’re goingto see that all of the paragraphs havebecome red. So coming to here, we’reseeing inside of children, any paragraphthat’s in there, including this onethat’s nested inside of an extra divhere. If we come in and we add thiscombinator, which is just a funny namefor a way that we can bemore specific about the relationshipsbetween elements when we’re selectingthem. I can come in and this one, let’sturn off this color red here. We’llcome and declare the same thing here:color of red. Now, you can see thisone and this one have become red, butthe one inside of this box over herehasn’t because the paragraph that isinside of here is not a child of thechildren class that we have here. Irealized I have a—oh no. I thought Ihad an extra element here, but that’sBecause I wanted that guy over here. Uh, usually I do that.Uh, anyway, it’s working. It doesn’t matter. It lookskind of weird, though. But yeah, gettingback on topic. We have this section of children, and then we’re onlyselecting the direct siblings ratherthan going further and deeper. This can be really useful insome different patterns. I’ll include a linkdown below on why I don’t think gapshould be used for everything. And thatincludes a use case on how we can usethis to reintroduce margins along theway. Now, next up we have the next sibling combinator, which is the pluscharacter right there.Uh, and this just means select the next sibling afterwhatever this is that matcheswhatever this is. Right? So if I havebox plus box, and this is actually partof the pattern that I was talking aboutfor the margins. Uh, but if we do a box plus box, we’re going to use abackground on here of red so it getsbrighter, and we can see some of ourboxes have become red. Let’s even makethose white, maybe, so that just reallystands out and isn’t too ugly.Uh, but we can see that we’ve selected every box. That follows another box. So let's golook at my index over here. Uh, so wehave all of these boxes here, and thisbox isn't coming after another box. Soit's not getting selected. But then thisone is coming after another one. So itis the next sibling that matches, andthis one as well comes after a box. Sothat one matches. So both of thesebecome white. In the middle, we havesomething else. So the something elsebreaks that pattern, meaning this boxdoesn't come directly after another box.It's not the next sibling. So this oneisn't selected. And then once again, werun into the same situation with thoseones right there. And if we do havesomething that's nested afterwards, thatone won't get selected. And it's downhere and not over here. That reallydoesn't change anything. This is only selecting siblings. So because this boxisn't a sibling of this one, we'retalking about the relationship betweenelements. This is, you know, the div isthe sibling, and then this is a child ofthis div. So it's not matching that.It's not an actual sibling. It has someother, I don't know if it's a cousin orhow we would call that one. ButWhatever the case is, this isn't asibling of this box. So this one doesn'tcount right here. Now up next, we havethe subsequent sibling. Thesubsequent sibling is a little bitmore interesting, though maybe alittle more niche. The plus one Idefinitely use more often than this one,but in the right situation, this onecan come in. So, we have the exact samesetup here in the HTML for this example. But if we jump on over to the CSS, I'vereplaced what we were doing before withthe plus. Now, I'm putting the TY rightthere. And on this one, if we do thesame thing, we'll say background on thatbox TY box. Background is going to bewhite on those ones. And now we can seethat all the boxes except for the firstone have become white, which isinteresting, right? So this one hasn'tbecome black like we had before. Thereason all of them are becoming whiteand this one here isn't getting skippedover like it had been previously isif we come back to our index here. Sosubsequent siblings, we're selecting theones that are in here. Thesubsequent sibling is going to affectanything, so any of the boxes that comeAfter a box, all of these elements arecoming after a box. So it works. Just asa bit of a change on this one, let'sput this one as the letter A. We'regoing to come back over to here and let's switch this selector for an A. Andwe're going to see that it selects everybox that comes after the A. So it'sselecting this box and this box and thisbox and this box. Even though there'ssomething in the middle, that doesn'tmatter. As long as it was a sibling thatcomes after, all these are boxes thatcome after that letter A, then they'rematching that. If I were to switch thisover to the plus that we had before,which was the direct sibling or the nextsibling, and we do that in this case,it's only selecting the first oneor the second box here. So, it'sselecting the one that comes right afterthat and only the direct one immediatelyafter. So sometimes it makes a bitmore sense than just using the sameclass for both of them. Hopefullythat illustrates the difference betweenthe subsequent and the next sibling,where we're getting everything else. And just to repeat that, we had adifferent nesting going on and whetherOr not, it will select it. I'll let youthink about it for a second. And therewe go. It has not selected it becauseagain, this is not a sibling. So boththe plus and the tilde are only going tobe selecting siblings. They'll never gofurther in and get other ancestors. Andthe more I think about it, I think itwould be a cousin, right? Because the childof one of the siblings. So I guess thosewould be cousins. Uh, all right. Cool. So that's the subsequent sibling and thenext sibling. Uh, and next up we haveattribute selectors. And I'm only goingto look at the basic use cases ofattribute selectors because we can divereally deep into this, and I'm going tohave another video exploring that, uh,coming out next week. But even just withthe basic parts of it, it is fair. Youcan start seeing the power ofthem come in. So for example, let's comeover on this index just to take a lookat the HTML where I have my attributeselectors. Uh, but we can select thingsbased on the attributes they have. Wehave classes, IDs; those are our dot and our hashtag, which are sort of shortcuts toaccessing those attributes. But we havehrefs, for example, that we can put onThings. We also, on links, often have ourtarget blank that shows up on things,right? To say like it's going to open itup in a new tab. So that's one optionthat we can do. And there are some reallybizarre and interesting thingsthat we can do in here. But let'sstart with the very basics, whichwould be, I could come on, I could selectall my A's. Let's just say all my A'shave a color of, we're going to say,orange-red, just so it really changes. There we go. We can see that that iskicking in. Now, what if, instead of theA, of our orange-red, and let's alsowe're going to do a text decorationdecorationof style. I think this is how you doit, right? Can we do dotted? There wego. So, they're all dotted as well. Andwe'll also do a text decorationcolor, because text decoration is ashorthand. Not enough people know that.I think I have a video on that. If I do,it will be linked in the description,as well as the differentstuff we can do here. I'm going tosay this will actually be white because, justfor demo purposes, it's good to not onlyuse color. Other ways of doing it. So, dots andwhite. Well, I guess we have colorand the dots coming in to distinguishwhat will be selected because I couldcome on an A, and then on this A, I couldopen and close some square brackets andsay that if they have a class, then I'mgoing to select it and style it.So, let's go back to the HTML. We can seethis last one has one, and this one inthe middle here also has a class. Prettyterrible class name, but it does have aclass. So, I can say that those ones aregoing to be styled differently. And this is just saying if it has a classattribute, we're going to style it. Youcould get really specific and say classis equal to something like link four.We saw that great name that I'd put on there.And then it's only selecting the one withthe class of link four, but of course hereyou would just do a link four insteadbecause why do it the longer way? The specificity is also the same. So we'renot changing anything there.We also don't have to have the A here. Let'sor it won't make a difference in this demo,I don't think. Let's find out.Let's just save everything that has a class.We'll get the orange-red. Uh, and yeah,For how I've set things up here, ithasn't actually changed anything. Yeah,you can do an attribute selector withouthaving the compoundedness of it, you know, with the elementas well. Uh hopefully that madesense. So, uh that's just doing anattribute like this. But we can also bea little bit more specific. Like I couldsay, if there's a target, I thinkthis is maybe a bit more of a useful usecase. So my socialize here has a targetbecause I'm opening that up in a new tab. And maybe you want to indicate thatit's actually getting opened in a newtab. So what we could do for that isinstead of necessarily changing thecolor, maybe I'm going to use somenesting. So we're going to do anampersand. If you haven't seen nesting,the ampersand here is aplaceholder for the entire selector. Soit'd be the same thing as doing my beforeon another selector down here. This ispart of native CSS now. So we cando things like this with CSS, andbrowser support is pretty good. Uh sowhat I could do here is content, and wecould put a URL, and I have an imagehere. The images folder, I believe. And we can seethat has come in before. That wouldprobably make more sense if it wascoming after. Uh, and we can have alittle icon show up there. Let’s adda little extra space here as well. Uh,just so we get a space coming betweenthem. It looks kind of weird because it’sbeing added after; so the underlinedoesn’t go there, but you get the idea.Uh, turn off your text decoration andthen you have this little extra iconshowing up. We could style it and do alittle bit more with it. Uh, and this isreally just scratching the surface ofattribute selectors. I wanted this to bethe combinators that you use most often.And this is how I generally use them. I’ll also do—like, you could have a dataattribute here, like data—uh, sale isequal to true or something, and you couldtarget things where the JavaScript ismanipulating a data attribute. Or innavigation, you might have an—uh, let’sfix that. You might have an area currentequals page, and that’s useful forhighlighting the active page that you’recurrently on. So then, if you’re stylingthe active page, instead of having aclass of current page or something likeThat, you could hook into it this way. Uh, and it helps with accessibility andscreen readers as well.So there are a fewdifferent times where I use attributeselectors like this.Uh, and as I said, next week there'll be a video coming outwhere I'm looking at some more advancedweirdish use cases that can actually besuper, super handy.So if you don't want to miss that video and you haven't yetsubscribed, please do consider subscribing. And with that, I would liketo thank my enabler of awesome, Johnny, aswell as all my other patrons and channelmembers for their monthly support.And of course, until next time, don't forgetto make your corner of the internet just a little bit more awesome., CSS Combinators You Need to Know, YouTube, 01k9q4vgb1d5vv3cbvxramqw0n.