- 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
Styling Form Buttons and Links with Attribute Selectors
3:34Now that we know how to target an element's attribute, let's learn the different ways we can select form buttons and links with attribute selectors.
So now we're starting to see the pattern
these selectors use to
0:00
match certain attributes.
0:04
Now let's take a look at a couple more.
0:06
This time, we'll want to target our form
buttons, and define a new mouse cursor.
0:08
So we'll want to display the pointer
cursor, when a user
0:14
hovers over any of these buttons, because
currently it's not doing that.
0:18
So usually with forms there are three
button attributes we can work with.
0:23
So let's go ahead and target all three.
0:27
So we're gonna create, a new selector
group that targets them.
0:29
So first, we're going to say input
followed by a set of square brackets.
0:33
Then we're gonna target an input element
with a type attribute
0:38
with the value of button, and we're going
to add a comma, and right below that,
0:44
we're also going to target input elements
with a type attribute value of reset.
0:49
And, finally, we're going to target input
elements that have a type value of submit.
0:57
We're going to say, type equals submit.
1:02
[BLANK_AUDIO]
1:05
Then inside the rule we're going to add a
cursor property and
1:09
set the value to pointer.
1:15
All right, so now when we save our style
sheet and refresh our form.
1:18
We can see how all button display that
pointer cursor when we mouse over them.
1:23
Cool.
[BLANK_AUDIO]
1:29
Finally sometimes we may have a lot of
similar elements on the page,
1:35
without class or id names.
1:39
But some of them may have special
attributes assigned to them.
1:42
So links for example.
1:46
So say we need to target all links that
open in a new window or tab.
1:48
Well, that's usually done with a target
attribute.
1:54
So if we go back to our index.html file
and take a look at our link element.
1:57
We can see a, that it has a target
attribute.
2:01
And the values underscore blank.
2:05
So let's create a new attribute selector
that targets an anchor elements,
2:08
target attribute with that underscore
blank value.
2:13
So right below the rule we just wrote,
2:17
let's first target anchor elements
followed by a set of square brackets.
2:21
Then we're going to match anchor elements
that have a target attribute and
2:26
the value _blank.
2:31
And for those, we're going to give it a
new color.
2:35
So let's give it a color property.
2:39
And set the color value to pound 39add1.
2:42
And right below that,
2:47
we're going to remove the text decoration
by setting the text decoration to none.
2:48
And finally, let's give it a bottom
border.
2:54
So let's say border dash bottom.
2:56
And we'll set the border width to one
pixel, and the border style to dotted.
2:59
[BLANK_AUDIO]
3:03
All right, so, let's save our
selectors.css file,
3:06
go back to the preview, and hit Refresh,
and
3:10
when we do that, we can see how the
password link here in the login form.
3:13
Takes on those new style,
3:19
since it has that target equals _blank
attribute and value.
3:20
So later we'll learn more powerful
attribute selectors,
3:24
that let us target small pieces or
substrings of an attribute's value.
3:28