Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Combinators give us the flexibility of targeting any siblings of an element. We can use the greater-than sign (>), plus sign (+), or tilde symbol (~) to make our selectors more specific.
Quick Reference
Using combinators
- The
>combinator targets a direct child of an element - The
+combinator targets an element's immediate sibling - The
~combinator targets all the specified siblings that follow an element
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Combinators explain the relationship
between elements in a selector.
0:00
So every time we target two or more
elements with one selector.
0:04
We'll need to use a combinator, and would
actually used combinators back in
0:07
CSS basics when we wrote descendant
selectors,
0:11
because the white space between the two
selectors is also considered a combinator.
0:14
Besides being able to target descendant
elements,
0:19
combinators also give us the flexibility
of targeting any siblings of an element.
0:22
We can use the greater than sign, the plus
sign, or
0:26
a tilde symbol to make our selectors more
specific.
0:29
Let's take a look at these.
0:32
First up, in a CSS selector,
0:34
the greater than sign is referred to as a
child combinator.
0:36
And selectors that use child combinators
are called child selectors,
0:40
because they target elements that are
direct children of other elements.
0:44
Now, direct children are those elements
that are directly nested
0:49
inside a parent element.
0:53
So, for example, when we take a look at
our HTML file, we can see that the form,
0:55
the hr and img elements are direct
children of the container div here.
1:01
But, the h1, the label element and
1:09
the input fields are all direct children
of the form element.
1:13
They're not direct children of this
container div.
1:18
So, knowing this, let's go back to our
style sheet, and the first thing I'm
1:22
gonna do is copy one of these comments and
scroll all the way down to the bottom,
1:26
and then, I'm going to create a new
comment that says Combinators.
1:31
So first, let's create a direct child
selector,
1:38
that targets anchor elements that are
direct children of a form.
1:42
So first, we're going to target the form
element, and then we're going
1:46
to follow that with a greater than sign
and then an a or anchor element.
1:52
Then we're going to give this anchor
elements a font size value of .7em.
1:57
Right.
So
2:04
let's save our style sheet, and let's
scroll down to our second form.
2:05
Notice how when we refresh the browser the
direct child selector we just wrote.
2:10
Targets this link, because it is in fact a
direct child of the form element.
2:16
But you may ask, well, it's the only link
in the form.
2:22
Well, let's see what happens when we add
this link as
2:25
a descendant of another child element.
2:27
So I'm gonna go ahead and copy.
2:30
The last link here.
2:32
And then I'll just paste it inside any of
the labels.
2:34
So for example I'm going to paste it
inside the password label.
2:37
All right?
So, when we save our index file and
2:44
take a look at it again.
2:45
Notice how it doesn't target that
particular link inside the password label,
2:47
since this link is no longer a direct
child of the form element,
2:51
it's now a direct child of the label
element.
2:56
So as we can see, this is a very specific
selector.
2:59
So now I'll just go back and undo.
3:03
The nested anchor element and the password
label.
3:06
And refresh.
3:10
So another combinator we can use in a
selector is a plus sign.
3:11
The plus sign combinator is called an
adjacent sibling combinator.
3:15
And selectors that use them are called
adjacent sibling selectors,
3:20
because they target an elements next
sibling on the page.
3:24
So the one that immediately follows the
element.
3:27
For example, the two input element here in
the first form are sibling elements so
3:30
let's go ahead and take a look at these in
the browser.
3:36
So notice how currently,
3:38
when the two buttons are in line they're a
little too close together.
3:41
Now what if we could somehow apply a left
margin.
3:47
To any button that's next to another
button.
3:50
So that way the first button remains flush
with the contact,
3:52
while the second button, gets a little bit
of separation with the left margin.
3:56
Well, with the adjacent sibling selector,
4:02
we can specifically target button elements
that immediately follow a button element.
4:04
without having to add extra classes in our
mark.
4:10
So let's go back to our style sheet, and
right above in the media query we wrote
4:13
earlier, let's create a new selector that
targets the class button.
4:18
Then with the plus sign combinator.
4:26
Will target its immediate sibling with the
same class.
4:29
So right after that we'll type .button.
4:31
And in this new rule let's add a margin
left property.
4:36
And let's set the value to 20 pixels.
4:41
So let's save our style sheet and bring up
the browser.
4:44
And when we refresh the page,
4:47
notice how the second reset button gets a
left margin.
4:49
While the first button is still aligned
with the content.
4:54
It's left aligned.
4:57
So now, any time we see two or more
sibling elements with that class button,
4:59
we'll see some separation between them
with that left margin.
5:04
So for example, let's go ahead and copy
these two.
5:06
And just paste them below.
5:09
And if we save and take a look at it
again,.
5:12
We see the separation between each button
while that first button remains aligned to
5:15
the left with the content.
5:19
So, now we'll be back and undo those two
buttons and just keep the submit and
5:22
reset ones moving forward.
5:26
Finally, the third combinator we can use
is the tilde symbol.
5:29
Now, the tilde symbol is called a general
sibling combinator.
5:34
Because it targets siblings, but this time
it not only targets an immediate sibling,
5:38
it actually targets every specified
sibling that follows.
5:43
Now, this general sibling comminator isn't
as commonly used as the child and
5:47
sibling selectors we just wrote.
5:52
But to quickly demonstrate how it works,
5:55
let's create one of these general sibling
selectors.
5:57
So, we'll go back to our style sheet, and
5:59
right beneath the child selector let's
create a general sibling selector that
6:02
targets every sibling label element that
follows an h1.
6:07
So, we'll do that by first selecting the
h1 element.
6:11
And then, we'll follow that with the tilde
symbol and the label element type.
6:16
So, again, with this selector, we're
telling the browser to
6:22
target all sibling label elements that
follow an h1.
6:26
So now, let's write a few CSS properties,
so
6:32
we can see which labels this selector will
target.
6:34
So first, let's add a background property,
and
6:38
let's set the color to tomato, my favorite
color, hah.
6:42
And then we'll set the color to white, and
let's give it a little bit of padding.
6:46
Let's say five pixels.
6:51
All right, so let's save our style sheet.
6:54
And refresh the page.
6:58
And as we can see, because there's an h1
in the contact form here,
7:00
now every sibling that follows the h1
takes on those styles we just wrote.
7:06
And if we were to keep adding labels to
this first form, they'd also turn red.
7:11
And also notice that only the labels in
the top contact form take on those styles,
7:18
not the ones in the login form, since
there isn't an H1 element in this form.
7:22
Just up top in the contact form.
7:28
So, as we've learned, combinators help us
create styles for
7:30
specific child elements, and sibling
elements.
7:34
But, keep in mind that we're only able to
target siblings that follow an element,
7:37
not ones that precede an element.
7:42
You'll learn a couple more uses for
7:45
these in the next code challenge, so be
sure not to skip it.
7:46
So let's quickly review some of what we've
learned so far about CSS selectors.
7:50
First, attribute selectors give us a lot
of flexibility for selecting elements,
7:55
because we're able to target an element by
any of its HTML attributes.
8:00
For example, a link's target attribute, or
an input element's type attribute.
8:04
remember the dry concept "Don't Repeat
Yourself."
8:09
So if we have CSS that is repeated several
times throughout our style sheet,
8:12
it is a good idea to refractor the CSS so
that each property and
8:16
value pair is defined once.
8:20
This makes our stop sheets more
maintainable.
8:22
Besides using descendant selectors to
target descendants of an element.
8:25
We can define more specific child and
sibling selectors, with combinators.
8:29
Remember.
[SOUND] The greater than sign
8:33
targets a direct child of an element.
8:35
[SOUND] The plus sign combinator targets
immediate siblings.
8:37
[SOUND] While the tilde symbol targets all
the specified siblings that
8:40
follow an element.
8:43
When used carefully, combinators let us
target more elements without having to
8:45
write extra classes or IDs in our markup.
8:49
Up next, we'll kick things up a notch when
we learn about structural pseudoclasses,
8:53
new powerful attribute selectors, and
more.
8:57
Now, if you thought these selectors were
pretty neat,
8:59
wait until you see what's next.
9:01
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up