This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
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
Unlike a type selector, which targets every element with the corresponding element type, an ID selector lets us assign a unique ID to an element.
Quick Reference
Using ID selectors
ID selectors are declared using the pound (#) symbol, followed by the ID name.
#primary-content {
background: grey;
}
This selector will match the HTML element that has an ID attribute with the value primary-content.
IDs are unique to the page, so an element can only have one ID and a page can only have one element with the same ID name.
Unlike a type selector, which targets
every element with a corresponding element
0:00
type, an ID selector, lets us assign a
unique ID to an element.
0:04
That way, we're able to specifically
target an element based on
0:09
its ID attribute.
0:13
ID selectors are declared using the pound
symbol followed by the ID name.
0:15
So in our style.css file right below the
type selectors we wrote in the previous
0:20
video, I've added some space, so we can
see what we're writing a little clearer.
0:26
Let's declare an ID selector by writing
the pound symbol.
0:31
Followed by the id name.
0:35
So let's make the id name primary dash
content.
0:37
Then we'll follow the selector with our
declaration block.
0:43
And inside the curly braces we're going to
type border colon space.
0:47
Then we're going to write three pixels,
space,
0:53
solid, space, then red, and we're going to
close it off with a semicolon.
0:56
So this ID selector we just wrote will
match the html element
1:02
that has an id attribute with the value
primary-content.
1:08
So if we save our style sheet and go over
to our workspace preview, when we refresh
1:12
the page we don't see that red border
anywhere [LAUGH] on the page just yet.
1:19
Well, that's because we still need to
assign the ID of
1:24
primary content to an HTML element.
1:28
So let's go over to our index.html file
and
1:32
we're going to give the first div element.
1:36
So the one here on line 12, an ID
attribute.
1:39
Then inside the quotation marks, we're
going to write primary-content.
1:44
So, the ID names are up to us.
1:52
And it's usually good practice to give
1:55
them meaningful names that explain what
they do, and what their purpose is.
1:57
Now because this div contains the main
content on the page we are giving
2:02
it the ID name "Primary Content", which
indicates that very clearly.
2:08
So now when we save our index.html file
and
2:14
take a look at it again in the browser
preview, there's our fancy red border
2:17
around the primary content div element on
the page.
2:23
ID's are unique to the page, so
2:28
it's important to remember that an element
can only have one ID.
2:30
And a page can only have one element with
the same ID name.
2:35
So because our div already has an ID
applied, we can no longer add IDs to it.
2:39
And we cannot use this primary content ID
anywhere else in
2:47
this particular HTML file.
2:51
IDs also have browser functionality.
2:55
They can be used as what are called
fragment identifiers for
2:58
creating landmarks or anchors in pages.
3:01
I will show you what I mean.
3:04
So if we give the header element here at
the top of our page, and
3:06
ID attribute with the value TOP.
3:10
Then we'll scroll down to the bottom of
our HTML file nd in our footer,
3:14
we'll give our anchor element here an href
value of #top.
3:20
This #top value will now match the ID of
top.
3:26
So let's take a look at what happens.
3:34
I'll go ahead and save the HTML file and
refresh the browser preview.so
3:36
now when we scroll down to the footer at
the bottom of the page and
3:42
click the back to top link here, the
browser takes us
3:47
back to the top of the page because we've
instructed it to find the element.
3:51
With the ID top, and we can actually see
the top anchor ID here upended to the URL.
3:56
So while we're in the footer element, lets
give the footer and ID of main footer.
4:05
So in the opening footer tag, we're going
to add an ID attribute, and
4:11
we're going to make the id value
main-footer.
4:17
So now we can save our index.html file,
and in our style sheet,
4:23
we'll target the main footer element with
an ID selector.
4:27
So right below the Primary content
selector we wrote earlier,
4:31
we're going to type # main dash footer,
4:35
followed by our declaration block, then
we're going to add a few CSS declarations.
4:41
First we're going to write padding dash
top, and
4:47
we're going to set the value to 60 pixels.
4:50
Right below that, we're going to add
padding dash bottom, and
4:54
we're also going to set the value to 60
pixels, and finally, we'll write border
4:59
dash bottom, and for the value we'll type
the word solid.
5:05
Followed by TEN pixels and the color
orange.
5:12
Then we'll close it off with a semicolon.
5:17
So now when we save our CSS file and
5:19
refresh our browser preview, when we
scroll down to the bottom of the page,
5:22
we can see how our footer has a nice
orange bottom border.
5:27
And it also has some top and
5:31
bottom padding, to give this footer text
some breathing room.
5:34
So as we can see with IDs we're
specifically telling the browser to
5:39
target a unique element on the page.
5:44
But what if we need to target more than
one element with these selectors,
5:48
while still maintaining some form of
specificity?
5:52
Well, that's where class selectors are
really useful.
5:55
And we'll cover those next.
5:58
You need to sign up for Treehouse in order to download course files.
Sign up