Using CSS Combinators to Identify Siblings and Descendants in CSS

[00:01] CSS combinators allow us to reference the relationship between two different HTML elements in our CSS. So to get us started I've got some very simple HTML, everything's wrapped in a section tag, I've got an H1 tag here, followed by an H2, followed by a paragraph, followed by an anchor tag, followed by a paragraph tag that containers an anchor tag, followed by another anchor tag. On the right here we can see the completely unstyled version of that, and on the bottom we can see a screen shot of what we want this to look like.

[00:31] One thing I'll point out here is we're not using any classes, any ids, anything of that nature, we're just going to be styling the direct elements. To get us started I'm going to go ahead and style the section itself. We're not using any combinators here, this is just basic styling. We're going to have a border 1 pixel, solid, CCC. We're going to have a width of 500 pixels, we're going to give it a little bit of padding on the bottom of 10 pixels, and that gets us our basic container with the padding getting us past this call to action link here.

[01:04] To start off with our first selector we're going to go ahead and style this H1 content header up at the top here. We're going to say section, we're going to use our first combinatory which is designated by a space. That is the descendent combinator, that means whatever follows this space should be a descendent of whatever preceded this space. So section space H1, we're going to give that our background color of black, or color of white, oops. Save that, see how it looks. Cool, so we've got that in place.

[01:37] We do need to overcome some built-in browser margins, so we'll say margin = 0save that. Now we need a bit of padding, so we're going to say padding, we're going to say 10 on the vertical, and 5 on the horizontal. Save that, and we are darned close to matching our content in this screen shot. The next thing we'll take a look at is these call to action links which need to be red, so we'll try our descendent combinatory by saying section a, which means that the anchor tag should be a descendent of the section, and we'll say our color is red.

[02:10] When we try that out we can see that the call to action links are in fact red, but also this link in the paragraph is red, so to identify these anchor tags that are only descendants of the section we can use the direct descendent selector which is designated by a greater than symbol. So the anchor tag in this case needs to be a direct descendent or child of this section tag.

[02:35] So we'll save that, and we can see that the two call to action tags which are in fact direct descendants of the section tag are colored red, whereas the one that is a direct descendent of the paragraph tag is using the browser defaults. So we need that one in the paragraph tag to be colored black. So we'll go ahead and use our direct descendent selector again.

[02:56] We're going to say section, the descendent of that is going to be the paragraph tag, and this direct descendent is going to be the anchor tag, and here we'll just color that black, and we can see that is reflected in the browser. The next one we're going to take a look at is this paragraph tag that follows the H2 and needs to be italicized. To do that we're going to use the adjacent sibling combinator.

[03:21] To do that we're going to say section, and it's descendent is going to be H2, and its adjacent sibling which can be identified with this plus symbol, needs to be a paragraph tag. When we see an H2 directly followed by a paragraph. It's not a descendent of the H2, it's a sibling to the H2, we now have our selector for that. Here we're going to stay font-style italic, save that. We can see that that paragraph tag is italicized, this one is not.

[03:49] The only thing we need there is a bit of a negative margin on the top, we're going to say 15 pixels, see how that looks. Looks good to me. The last thing we're going to look at is the general sibling combinator. So its section, and we're going to start with our H1, and what we're going to do here is we need all of the siblings to that H1 to have this margin on the left, it looks about 15 pixels to me.

[04:14] To get to general siblings which means it's not necessarily the adjacent sibling, it's just any sibling after the H1, we can use the ~ symbol. After that I'm going to use the universal element selector which is the asterisk. I'm just going to say margin-left, 15 pixels. Save that, and now all of these siblings after the H1 have a margin on the left of 15 pixels.