Combinators

[00:00:00]
>> We're gonna chat about combinators now. And if this is a very heavy chapter it is and I'm sorry for that. But this is probably gonna be the most cognitively heavy one we're gonna work through, and then everything else will be a little bit smoother sailing. So combinators, we can combine selectors in a way that gives them relationship to other elements.

[00:00:24]
So we've got this descendent selector, that white space separated. It combines two selectors such that the elements matched by the second selector are selected if they have a parent matching the first element. So in this example, it's gonna match any link or anchor element that's contained within a list item, that's contained within an unordered list.

[00:00:45]
So it won't just match any anchor element on the page.
>> Sorry, does that have any differences when you're using the arrow key as well?
>> Like the-
>> In between-
>> Yeah.
>> Yes, we'll talk about that. Yeah, absolutely, yeah. So this is what this looks like.

[00:01:01]
So we've got an unordered list, three list items, each containing a link here. We've got our descendant selectors, which are space separated here. It's gonna say, color all those links red. And you'll notice, we've also got a floating link down here. But this link is not contained within a list item, within an unordered list, so that one's going to maintain that black color.

[00:01:23]
So that's a descendant selector. So this is probably what you were referring to, TJ, this direct descendant or child combinator, it's that greater than symbol. Was that what you were referring to? So this is a greater than symbol, so it matches elements selected by the second selector who are direct children elements of the first selector.

[00:01:45]
So in this case it's gonna match all paragraph elements that are direct children of a div that has a class of text, so it won't style nested paragraphs. So if you bought like a div with another div with a paragraph. And the second div does not have that class of text, that paragraph will not be selected, so here's an example.

[00:02:08]
We've got our div with class of text, we have a paragraph. We've got another div, no classes, and a paragraph inside there. But again, we've got our direct descendant selector or combinator here. Setting the font weight to bold, we can see only the first paragraph has a font weight of bold because it is a direct child.

[00:02:33]
You might have seen a + symbol somewhere. So this is an adjacent sibling combinator, so it matches the second element If it immediately follows the first element and they both have the same parent. So in this case, we'll only select a paragraph if it immediately follows an image under that same parent.

[00:02:55]
So this is what that looks like, so we've got heading one, paragraph and a paragraph. We're saying select a paragraph immediately follows a heading one, give it a color of red. So only the first paragraph here is colored red because it is an adjacent sibling. The second one is not an adjacent sibling to that heading one.

[00:03:24]
How about now? What is the style gonna look like on this? Anyone wanna guess?
>> I think only the first paragraph.
>> You think only the first paragraph?
>> Yeah, because we have the + P, right?.
>> I'm going to say none of them are gonna turn red because the div comes after the h1.

[00:03:48]
>> That's right, that was a good guess, but that was correct, where none of them will have that color of red because they have to have the same parent. And then lastly we've got this general sibling combinator here. I believe this is called a tilde, I don't know that's true, cool, tilde.

[00:04:07]
I learned that from my dad when I was a child and I was like, I will never need to know this information, but now it's come in handy. So this matches all iterations of that second element that are following the first element, but they don't have to immediately follow it, right?

[00:04:21]
So they have to have the same parent, that's the only caveat. So in this example, it would match all code elements that are general siblings of a paragraph element, and they have that same parent, so this is what that looks like. We've got a paragraph, two code elements, another paragraph, then we've got a div with a code block inside of that.

[00:04:43]
So what does this look like? So only the first two code blocks are gonna be red, right? Because they have the same parent as the paragraph. So even though the second code block defined on line three is not immediately following the paragraph, it's still red because it's a general sibling and it's underneath the same parent.

[00:05:02]
But that third code block is wrapped inside of a div, so it has a different pair and as a result will not be red. You probably won't use too many types of combinators above, maybe the direct descendant one with a greater than symbol, that one's pretty common. The other ones you might not see so often, but it's just good to recognize a combinator when you see it.

[00:05:19]
The combinators themselves don't add any specificity in case anyone's wondering. The actual symbols don't add any weight to the specificity calculation, but again if there's a class selector to the right of the direct descendant combinator. Of course, that class selector will have weight, just not the actual combinator symbol.

[00:05:37]
>> What is the difference from the greater than and the tilde?
>> The greater than the tilde, great question. So if we go back to this, the greater than it is a direct descendant, right? So we start at the right here. We wanna select all paragraphs, so long as they are a direct child of this element.

[00:06:01]
In this case, it's a div with a class of text, so here we have a div class of text. And this div has two direct children, it's got a paragraph and a div, right? When I say direct children, I mean top-level. So this paragraph is not a direct child of this div, it's nested inside of another div, so two top-level children here.

[00:06:24]
This paragraph, this first one here on line two, this is a direct descendant of this div, so that's why only this first paragraph is bolded. This second one is not a direct descendant. When we talk about the tilde, it is a general sibling, so it's not a descendant, now we're dealing with siblings, so they're gonna be elements on the same level here.

[00:06:46]
So these two code blocks on lines two and three, these are siblings of each other. The paragraph is also a sibling of these code elements. So, there are four siblings here, we've got a paragraph, a code, another code, and a div. All are siblings. This code block, the third code block here, is a direct descendant of this development, so it's a child.

[00:07:08]
So we're talking about siblings versus children. And a general sibling means, hey, we're at the same level, we're on that same tree level, essentially. I don't need to be next to you to be a general sibling, I don't need to be next to you, we're still siblings. If I have, let's say four brothers, my fourth brother born later than me, is still my general sibling.

[00:07:38]
So yeah, it's the difference between a direct child and a general, like sibling. Does that make a little more sense? I know it's a little tricky.
>> I've got you now, yep, I think I'm fine-
>> We won't be working with general siblings during our coding, but it's just good to recognize and be like, that's a combinator.

[00:07:57]
I need to look up what that means.
>> There's a question around, when would you use Flexbox versus Grid?
>> Flexbox versus Grid, this is also a very common interview question, so it's good to be aware of this. Flexbox is meant for one-dimensional layouts. You can think of a navigation, like in our design here.

[00:08:15]
You can see we've got a nav bar here, we've got three links, and they all sit one-dimensionally on that axis, right? So that's a great use case for Flexbox, and we will use Flexbox for that. Grid is great for two-dimensional layouts. So that would be if we zoom out and look at our entire homepage, this is two-dimensional.

[00:08:35]
Cuz we've got that nav at the top, and we've got a main content area, and we've got a button bar. So it's the difference between a one-dimensional layout versus a two-dimensional layout. And you can use Flexbox within Grid and you absolutely should if you have a use case for that.