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
CSS gives us the flexibility of being able to target an element by any of its HTML attributes and values.
Quick Reference
Using attribute selectors
This attribute selector targets any element that has a class attribute:
[class] {
border: solid 1px #ccc;
}
To target an input element with a type value of submit, we write:
input[type="submit"] {
background-color: green;
}
This targets a elements with a target value of _blank:
a[target="_blank"] {
color: tomato;
}
As we've learned in previous courses,
0:00
HTML elements can accept various types of
attributes.
0:02
For example, an id attribute, a class
attribute, or an href and title attribute.
0:05
So what's great is that CSS gives us the
flexibility of being able to
0:10
target an element by any of its attributes
and values.
0:14
These are particularly useful for styling
form elements.
0:18
So let's take a look at common examples of
basic attribute selectors.
0:21
So when we launch our first workspace,
0:25
we have all the files we need to get
started over here in the left sidebar.
0:28
So in our project files,
0:32
we have an index.html file containing the
mark up for two forms.
0:33
Each form consists of simple text fields
and Submit buttons.
0:40
Then over here in the CSS directory,
0:45
we have a style sheet containing all the
base styles for our page.
0:47
Nothing really new here.
0:52
So we don't need to worry about this file
moving forward.
0:54
Now the style sheet we're gonna use is the
selectors.css file.
0:57
And when we click the Preview icon over
here in the top right corner of the page,
1:02
that brings up the work space preview in
the browser.
1:07
So here we're able to see what the forms
look like.
1:10
The top form is a simple contact form.
1:13
And we can assume the second form to be a
Login form.
1:16
So back in our work space, when we take a
look at our index.html file,
1:20
notice how most of the elements have
attributes in their opening tags.
1:25
For instances, the type attribute, the for
1:29
attribute, even the placeholder attribute
and so forth.
1:33
With attribute selectors,
1:38
we can also target these elements based on
any of these attributes or their values.
1:39
So when we define an attribute selector
with CSS instead of matching the element
1:46
type the class or ID name, the selector
matches the attribute itself.
1:51
And, if we wanna be more specific, we can
also match the attributes value.
1:58
So for example, the most basic attribute
selector will target an element attribute,
2:03
no matter its value.
2:09
So let's say we wanna target every element
on the page, with a class attribute.
2:11
So we'll go back to the selector.css file.
2:17
And we're going to create our first
attribute selector by typing a set of
2:21
square brackets, then writing class inside
of them.
2:25
Then inside the curly braces, let's add a
color property and set the value to red.
2:32
All right, so once we save our workspace
and bring up the browser and
2:38
refresh, notice how only those elements
with a class attribute have the red
2:43
text color style applied, even if their
class attribute values are different.
2:48
So currently, the two form elements are
the only ones with class attributes.
2:53
Now, if we go back to our selector and add
a specific class value for
3:03
example lets say, class equals, then a set
of quotes and
3:08
inside the set of quotes, we're going to
type form dash contact.
3:12
And let's go ahead and replace the color
declaration with a padding property, and
3:17
let's set the value to 20 pixels and 24
pixels.
3:21
And let's add a background property,
3:27
and we'll set it to a hex color value of
pound #f4f7f8.
3:30
When we save our workspace, then refresh
the browser,
3:39
notice how it now targets the first form
with the class form contact.
3:43
As you can see here in the first form
elements class attribute, the valley for
3:50
it is form dash contact.
3:55
And we may also see an attribute selector
that's qualified with an element type.
3:58
So if we add the form type selector to
this
4:03
attribute selector right before the
opening square bracket here.
4:07
What this means is that it's specifically
targeting a form element
4:11
with the class form contact.
4:16
And as we can see, it works the same way.
4:19
It's just a little more specific.
4:21
And we can do the same thing with id
attributes.
4:24
So to target the div that has an id
attribute with the value container,
4:28
we'll go back to our selectors.css file,
and let's go ahead and
4:34
target the development then write a set of
square brackets.
4:40
Then we're going to type id equals and the
value will be container.
4:45
And inside the curly braces, let's go
ahead and
4:53
add a max with property, and set the value
to 500 pixels.
4:55
And right below that, let's add a margin
property, and we'll set the value to auto.
5:00
So now, when we save our selectors.css
file and refresh the page.
5:07
We can see that it targets the main
container div on the page.
5:12
So now if we ever see selectors written
this way in a style sheet,
5:18
we know exactly what they mean.
5:23
Well, now you may be asking, why target
elements with
5:26
attribute selectors instead of the classes
or ids we learned about earlier.
5:29
Well, most of the time there's no real
advantage to using these
5:34
attribute selectors when it comes to
targeting ids and class attributes.
5:38
It's usually best to use a class or id
selector, in this case.
5:42
So, let's go ahead and do that.
5:46
I'm gonna replace the first attribute
selector
5:48
with the form contact class selector.
5:51
Then right below,
5:55
we'll replace the next attribute selector
with the id selector container.
5:57
So as we can see, these are a little more
readable for us.
6:04
Now, attribute selectors can also be a bit
slower to interpret then a class or id.
6:07
Even for the browser.
6:12
In some cases, the browser has to do a
little extra work to interpret and
6:14
parse complex attribute selectors.
6:18
But, as I mentioned earlier, attribute
selectors come in
6:22
handy when styling form elements, for
instance, the type attribute.
6:25
An input element is what determines the
function of an input element.
6:31
So, say we have a lot of input elements on
the page, which we kind of do here, and
6:36
we only want to target input elements with
a type attribute of text.
6:41
So, we'll go back to our style sheet, and
let's target input elements
6:48
that have a type attribute with the value
text.
6:54
Then we're going to add a background
property.
7:02
And we're going to set the background
color to a hex value of pound #fdfee6.
7:06
So now when we save our style sheet and
7:15
refresh the browser, notice how only those
two input fields with
7:17
a type attribute value of text take on the
light yellow background color.
7:22
But in our case, we'd like to give form
fields with
7:28
a placeholder attribute that light yellow
background instead.
7:31
So, let's go back to our selector and
7:34
change the attribute in our selector to
placeholder.
7:38
So, we're gonna replace type equals text
with the placeholder attribute.
7:42
And now when we save our style sheet, and
7:50
take a look at it again, we can see how
the only field with
7:53
that light yellow background is the email
field with that placeholder attribute.
7:56
[BLANK_AUDIO]
8:01
Let's say that later, we realize that we
don't exactly need to
8:05
target every field with a placeholder
attribute.
8:08
Just the ones that accept an email
address.
8:11
Well, now we can go back, and once again
define the type attribute in our selector.
8:14
So this time, we'll replace placeholder
with the type attribute.
8:21
And this time, we're gonna target the
value email.
8:25
So when we save and refresh the page, we
can see how it targets the same form
8:31
field because if we go back to our index
file and take a look at the input element,
8:36
it does indeed have a type attribute with
the valid email
8:40
You need to sign up for Treehouse in order to download course files.
Sign up