1
00:00:00,590 --> 00:00:04,090
So now we're starting to see the pattern
these selectors use to

2
00:00:04,090 --> 00:00:06,380
match certain attributes.

3
00:00:06,380 --> 00:00:08,370
Now let's take a look at a couple more.

4
00:00:08,370 --> 00:00:14,420
This time, we'll want to target our form
buttons, and define a new mouse cursor.

5
00:00:14,420 --> 00:00:18,070
So we'll want to display the pointer
cursor, when a user

6
00:00:18,070 --> 00:00:21,860
hovers over any of these buttons, because
currently it's not doing that.

7
00:00:23,540 --> 00:00:27,410
So usually with forms there are three
button attributes we can work with.

8
00:00:27,410 --> 00:00:29,300
So let's go ahead and target all three.

9
00:00:29,300 --> 00:00:33,420
So we're gonna create, a new selector
group that targets them.

10
00:00:33,420 --> 00:00:38,420
So first, we're going to say input
followed by a set of square brackets.

11
00:00:38,420 --> 00:00:42,519
Then we're gonna target an input element
with a type attribute

12
00:00:44,050 --> 00:00:49,270
with the value of button, and we're going
to add a comma, and right below that,

13
00:00:49,270 --> 00:00:55,750
we're also going to target input elements
with a type attribute value of reset.

14
00:00:57,130 --> 00:01:02,690
And, finally, we're going to target input
elements that have a type value of submit.

15
00:01:02,690 --> 00:01:05,348
We're going to say, type equals submit.

16
00:01:05,348 --> 00:01:09,447
[BLANK_AUDIO]

17
00:01:09,447 --> 00:01:15,147
Then inside the rule we're going to add a
cursor property and

18
00:01:15,147 --> 00:01:17,620
set the value to pointer.

19
00:01:18,722 --> 00:01:23,940
All right, so now when we save our style
sheet and refresh our form.

20
00:01:23,940 --> 00:01:29,910
We can see how all button display that
pointer cursor when we mouse over them.

21
00:01:29,910 --> 00:01:35,339
Cool.
[BLANK_AUDIO]

22
00:01:35,339 --> 00:01:39,924
Finally sometimes we may have a lot of
similar elements on the page,

23
00:01:39,924 --> 00:01:42,200
without class or id names.

24
00:01:42,200 --> 00:01:46,180
But some of them may have special
attributes assigned to them.

25
00:01:46,180 --> 00:01:48,530
So links for example.

26
00:01:48,530 --> 00:01:54,030
So say we need to target all links that
open in a new window or tab.

27
00:01:54,030 --> 00:01:56,550
Well, that's usually done with a target
attribute.

28
00:01:57,700 --> 00:02:01,880
So if we go back to our index.html file
and take a look at our link element.

29
00:02:01,880 --> 00:02:05,180
We can see a, that it has a target
attribute.

30
00:02:05,180 --> 00:02:07,050
And the values underscore blank.

31
00:02:08,340 --> 00:02:13,920
So let's create a new attribute selector
that targets an anchor elements,

32
00:02:13,920 --> 00:02:17,430
target attribute with that underscore
blank value.

33
00:02:17,430 --> 00:02:21,340
So right below the rule we just wrote,

34
00:02:21,340 --> 00:02:26,050
let's first target anchor elements
followed by a set of square brackets.

35
00:02:26,050 --> 00:02:31,865
Then we're going to match anchor elements
that have a target attribute and

36
00:02:31,865 --> 00:02:35,078
the value _blank.

37
00:02:35,078 --> 00:02:39,570
And for those, we're going to give it a
new color.

38
00:02:39,570 --> 00:02:42,830
So let's give it a color property.

39
00:02:42,830 --> 00:02:47,068
And set the color value to pound 39add1.

40
00:02:47,068 --> 00:02:48,645
And right below that,

41
00:02:48,645 --> 00:02:54,468
we're going to remove the text decoration
by setting the text decoration to none.

42
00:02:54,468 --> 00:02:56,750
And finally, let's give it a bottom
border.

43
00:02:56,750 --> 00:02:59,760
So let's say border dash bottom.

44
00:02:59,760 --> 00:03:03,958
And we'll set the border width to one
pixel, and the border style to dotted.

45
00:03:03,958 --> 00:03:06,498
[BLANK_AUDIO]

46
00:03:06,498 --> 00:03:10,353
All right, so, let's save our
selectors.css file,

47
00:03:10,353 --> 00:03:13,469
go back to the preview, and hit Refresh,
and

48
00:03:13,469 --> 00:03:19,030
when we do that, we can see how the
password link here in the login form.

49
00:03:19,030 --> 00:03:20,810
Takes on those new style,

50
00:03:20,810 --> 00:03:24,990
since it has that target equals _blank
attribute and value.

51
00:03:24,990 --> 00:03:28,360
So later we'll learn more powerful
attribute selectors,

52
00:03:28,360 --> 00:03:33,040
that let us target small pieces or
substrings of an attribute's value.