Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Adjacent selectors allow you to target elements based on which elements follow one another in your code. Essentially, adjacent selectors let you style in an element based on which element comes before it in the document, providing that both of those elements are inside the same parent. Does that sound confusing? Well, it's really not, once you try it out. So let's go ahead and open up the adjacent.htm file. You can find that in the 02_11 folder, in the Chapter 2 directory. And I just want to check this in the browser before we get into writing the CSS for this, so let me switch over to my browser. And what we have is we have a couple of headlines.
This is a heading 1 followed by another heading 1 which is inside of an article, so the rest of the text is inside of an article tag. And we have some paragraphs after that, we have some subheadings with paragraphs, another subheadings with some paragraphs. So what I'd like to do here is to adjust the spacing between the headings and the paragraphs wherever they're found. I'd also like the initial paragraph after each subheading to be italicized, just for stylistic purposes. Now this can be very hard to do with traditional selectors. Even descendent selectors would make this difficult, and I would probably have to employ some type of class attribute, which would mean that I'd have to go through all the code and apply a class of the first paragraph after every single heading.
Well, the good news here is that adjacent selectors allow us to do this without using class or ID attributes. So I'm going to go back to my code, and I just want to scroll up a little bit till I get into my styles. There are quite a few styles already in the document, and that's just sort of to handle the default styling that we have. So right here in the *add styles here* section around line 69, that's where I'm going to add my styles. So adjacent selectors are a lot like child selectors in the fact that they have a combinator that they use. If you remember from the last movie, the child combinator is the greater than sign, so adjacent selectors use the plus symbol.
So here I'm just going to type in h2 + p, so that's in the adjacent combinator. And again, whitespace here is immaterial, so I could write the selector like this, or I could write the selector like that. It's whichever one you're most comfortable with, whichever one is easier for you to read; both of them will work just fine. All right, so I'm going to go ahead and open up my curly braces, and inside that I'm just going to do some really basic styling. I'm going to do margin-top. So I'm going to increase the space above the paragraph by .6ems, so that's .6em and then a semicolon, and then I'm going to do font-style: italic.
And I know for several of these exercises in this chapter where we're focusing on selectors I'm setting properties and I'm not really talking about those properties that much. If that's frustrating to you, please don't get frustrated; we're going to have some chapters that'll follow this where we get into properties like margins, and font-style, font-family, typography, things like that. So we will be focusing on those properties just a little bit later on. Right now, our focus is on targeting. Okay, so going back to this selector, this basically says find every single paragraph that immediately follows an h2 if they're in the same parent.
So in this case, here's our article tag that's what our parent element, and if I scroll down, I can find a heading 2 with the paragraph directly following it so it would target this paragraph and then any paragraph like that. So I'm going to save this, go back to my browser, and refresh my page, and you can see, if I scroll down a little bit, it targeted each of the paragraphs that come directly after a heading 2. We've got our extra space above it and we have the italicized text. Now one of the things this allows me to do, just like in normal typography on a page, if I want my subheadings and paragraphs a little bit closer together to sort of indicate that this section belongs together and have a greater amount of space above that, this type of selector makes that a lot easier to do.
Now you'll notice that it didn't target the paragraph that came directly after the h1, and that's because we were very specific in the saying h2. Now we can group from these selectors together. So if I go back into my code and go back up to the selector that we just wrote, it's just as simple for me to say h1 + p, and that's how we're going to group these together. I can't get really group them together here. So if I try to do this syntax--h1, h2 + p--that would target every single h1.
If I try to do something like this, where I was saying h1 + h2 + p, that's not going to work either, because that's basically saying target a paragraph when it comes immediately after an h2 which comes immediately after an h1. So in order to target both instances, I've got to say h1 + p, so I'm just grouping those together. So again, I'm going to save this, go back out to my browser and test it, and you'll notice that it's targeting that paragraph as well. So these adjacent selectors, they're extremely handy, and they can save you a tremendous amount of time when you're targeting elements based on when they are found with specific siblings.
Now this is particularly useful when dealing with the interior styling of consistently structured elements. For example, let's say you had a complex block quote or a pull quote or something like that that you'd pulled out and it's always going to be structured the same. These adjacent selectors are really handy at targeting the sort of similar structures and styling them the way you want to in a very complex fashion. That's one of the things I really love about it: it allows you to style these elements without using unnecessary class attributes. And if you can really plan out when to use them, I think you will find them extremely helpful.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.