- Course Overview 1:49
- Attribute Selectors 8:44
- Styling Form Buttons and Links with Attribute Selectors 3:34
- Attribute Selectors Challenge 3 objectives
- DRY CSS 10:51
- Child, Adjacent, and General Sibling Combinators 9:03
- Combinators Challenge 2 objectives
- Attribute Selectors and Combinators Review 5 questions
Preview
Video Player
00:00
00:00
Attribute Selectors
8:44CSS gives us the flexibility of being able to target an element by any of its HTML attributes and values.
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 let's 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 #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 value 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 div 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-width 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 #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