- Introducing CSS Selectors 8:00
- Type Selectors 4 objectives
- ID Selectors 4:49
- Class Selectors 8:59
- ID and Class Selectors 6 objectives
- Descendant Selectors 4:37
- Descendant Selectors 3 objectives
- Pseudo-classes 7:41
- Pseudo-classes 3 objectives
- Using Comments in CSS 5:03
- Quiz: Basic Selectors 7 questions
Preview
Video Player
00:00
00:00
ID Selectors
4:49In our last video, we worked with type selectors, which target every matching HTML element. Which means we’re making great progress. But what if, instead of selecting all the paragraphs in your HTML surrounded by the
element, you only wanted to style one specific paragraph? That’s where ID selectors come in. An ID selector lets us assign a unique ID to an element. That way, we're able to specifically target an element based on its ID attribute.
In our last video, we worked with
type selectors, which target every
0:00
matching HTML element, which
means we're making great progress.
0:06
But what if, instead of selecting all
the paragraphs in your HTML
0:11
surrounded by the p element, you
only wanted to style one
0:17
specific paragraph? That's
where ID selectors come in.
0:20
An ID selector lets us assign
a unique ID to an element.
0:25
That way, we're
able to specifically target
0:31
an element based on its ID
attribute. Let's say we wanted
0:34
to highlight Developer Diane's
education section visually,
0:39
without highlighting the experience
or skills sections.
0:44
An ID selector will help
us accomplish this.
0:49
ID selectors are declared
using the pound or
0:53
hashtag symbol, followed
by the ID name.
0:58
In our style sheet, right below
the type selectors we wrote in
1:03
the previous video,
let's declare an ID selector.
1:08
This selector will match
the HTML element that has
1:14
an ID attribute with
the value education.
1:18
If we take a look at our
page in the browser,
1:22
we don't see that red border
anywhere on the page just yet.
1:26
That's because we still need to
assign the ID to an HTML element.
1:30
Let's go back to our
HTML file and
1:37
give the first section
element an ID of education.
1:41
The ID name is up to you,
as long as you start with a letter,
1:49
don't include spaces, and
avoid most punctuation.
1:55
Hyphens and underscores
are okay. And of course,
2:00
we need to match exactly what
we wrote in our style sheet file.
2:03
It's good practice to give
your IDs meaningful names that
2:09
explain what they do and
what their purpose is. Because
2:13
this section contains Developer
Diane's education history, we're
2:17
giving it the name education, which
communicates that very clearly.
2:23
Let's check out the browser, and
there's our fancy red border.
2:30
IDs are unique to the page.
2:37
So it's important to remember
that a page can have only
2:39
one element with the same ID name.
For example, I'll try adding the ID
2:43
called education to this h2 element.
And if I validate my HTML
2:49
using a link I've provided
in the Teacher's Notes,
2:56
I find it's no longer valid
thanks to the duplicate ID.
3:00
A single element can't
have multiple IDs, either.
3:06
So if I try adding another ID called
history to my section element,
3:11
I also receive
a validation error.
3:23
I'll back up and
make corrections
3:28
and validate again, just to
make sure I have no errors.
3:36
Examining our HTML again, I can
see there are three ul elements.
3:43
So if I wanted to target only one
of them, I could use an ID selector.
3:50
When I refresh
in the browser,
4:14
my skills list has a bluish
gray background,
4:18
plus some extra
spacing around it.
4:22
But what if Developer Diane
felt particularly proud
4:25
of some of
these skills?
4:29
What if she wanted to highlight
her HTML, JavaScript, and
4:32
mobile web
development skills?
4:37
Since ID selectors must be unique,
we'll need a different solution.
4:39
We'll check one out
in our next video.
4:45