Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Selectors!
You have completed CSS Selectors!
Preview
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