1
00:00:00,520 --> 00:00:02,850
As we've learned in previous courses,

2
00:00:02,850 --> 00:00:05,710
HTML elements can accept various types of
attributes.

3
00:00:05,710 --> 00:00:10,900
For example, an id attribute, a class
attribute, or an href and title attribute.

4
00:00:10,900 --> 00:00:14,770
So what's great is that CSS gives us the
flexibility of being able to

5
00:00:14,770 --> 00:00:18,070
target an element by any of its attributes
and values.

6
00:00:18,070 --> 00:00:21,050
These are particularly useful for styling
form elements.

7
00:00:21,050 --> 00:00:24,789
So let's take a look at common examples of
basic attribute selectors.

8
00:00:25,820 --> 00:00:28,130
So when we launch our first workspace,

9
00:00:28,130 --> 00:00:32,420
we have all the files we need to get
started over here in the left sidebar.

10
00:00:32,420 --> 00:00:33,910
So in our project files,

11
00:00:33,910 --> 00:00:40,050
we have an index.html file containing the
mark up for two forms.

12
00:00:40,050 --> 00:00:45,000
Each form consists of simple text fields
and Submit buttons.

13
00:00:45,000 --> 00:00:47,860
Then over here in the CSS directory,

14
00:00:47,860 --> 00:00:52,340
we have a style sheet containing all the
base styles for our page.

15
00:00:52,340 --> 00:00:54,030
Nothing really new here.

16
00:00:54,030 --> 00:00:57,460
So we don't need to worry about this file
moving forward.

17
00:00:57,460 --> 00:01:01,580
Now the style sheet we're gonna use is the
selectors.css file.

18
00:01:02,580 --> 00:01:07,450
And when we click the Preview icon over
here in the top right corner of the page,

19
00:01:07,450 --> 00:01:10,300
that brings up the work space preview in
the browser.

20
00:01:10,300 --> 00:01:13,490
So here we're able to see what the forms
look like.

21
00:01:13,490 --> 00:01:16,240
The top form is a simple contact form.

22
00:01:16,240 --> 00:01:19,387
And we can assume the second form to be a
Login form.

23
00:01:20,770 --> 00:01:25,240
So back in our work space, when we take a
look at our index.html file,

24
00:01:25,240 --> 00:01:29,940
notice how most of the elements have
attributes in their opening tags.

25
00:01:29,940 --> 00:01:33,260
For instances, the type attribute, the for

26
00:01:33,260 --> 00:01:38,290
attribute, even the placeholder attribute
and so forth.

27
00:01:38,290 --> 00:01:39,630
With attribute selectors,

28
00:01:39,630 --> 00:01:46,200
we can also target these elements based on
any of these attributes or their values.

29
00:01:46,200 --> 00:01:51,650
So when we define an attribute selector
with CSS instead of matching the element

30
00:01:51,650 --> 00:01:58,370
type the class or ID name, the selector
matches the attribute itself.

31
00:01:58,370 --> 00:02:03,840
And, if we wanna be more specific, we can
also match the attributes value.

32
00:02:03,840 --> 00:02:09,910
So for example, the most basic attribute
selector will target an element attribute,

33
00:02:09,910 --> 00:02:11,070
no matter its value.

34
00:02:11,070 --> 00:02:16,410
So let's say we wanna target every element
on the page, with a class attribute.

35
00:02:17,680 --> 00:02:21,200
So we'll go back to the selector.css file.

36
00:02:21,200 --> 00:02:25,860
And we're going to create our first
attribute selector by typing a set of

37
00:02:25,860 --> 00:02:30,230
square brackets, then writing class inside
of them.

38
00:02:32,430 --> 00:02:38,552
Then inside the curly braces, let's add a
color property and set the value to red.

39
00:02:38,552 --> 00:02:43,650
All right, so once we save our workspace
and bring up the browser and

40
00:02:43,650 --> 00:02:48,640
refresh, notice how only those elements
with a class attribute have the red

41
00:02:48,640 --> 00:02:53,170
text color style applied, even if their
class attribute values are different.

42
00:02:53,170 --> 00:02:58,800
So currently, the two form elements are
the only ones with class attributes.

43
00:03:03,200 --> 00:03:08,570
Now, if we go back to our selector and add
a specific class value for

44
00:03:08,570 --> 00:03:12,230
example let's say, class equals, then a set
of quotes and

45
00:03:12,230 --> 00:03:17,020
inside the set of quotes, we're going to
type form dash contact.

46
00:03:17,020 --> 00:03:21,990
And let's go ahead and replace the color
declaration with a padding property, and

47
00:03:21,990 --> 00:03:27,890
let's set the value to 20 pixels and 24
pixels.

48
00:03:27,890 --> 00:03:30,260
And let's add a background property,

49
00:03:30,260 --> 00:03:39,230
and we'll set it to a hex
color value of #f4f7f8.

50
00:03:39,230 --> 00:03:43,200
When we save our workspace, then refresh
the browser,

51
00:03:43,200 --> 00:03:49,070
notice how it now targets the first form
with the class form-contact.

52
00:03:50,080 --> 00:03:55,170
As you can see here in the first form
elements class attribute, the value for

53
00:03:55,170 --> 00:03:56,550
it is form dash contact.

54
00:03:58,020 --> 00:04:03,410
And we may also see an attribute selector
that's qualified with an element type.

55
00:04:03,410 --> 00:04:07,730
So if we add the form type selector to
this

56
00:04:07,730 --> 00:04:11,710
attribute selector right before the
opening square bracket here.

57
00:04:11,710 --> 00:04:16,370
What this means is that it's specifically
targeting a form element

58
00:04:16,370 --> 00:04:19,060
with the class form-contact.

59
00:04:19,060 --> 00:04:21,710
And as we can see, it works the same way.

60
00:04:21,710 --> 00:04:22,940
It's just a little more specific.

61
00:04:24,940 --> 00:04:28,500
And we can do the same thing with id
attributes.

62
00:04:28,500 --> 00:04:34,980
So to target the div that has an id
attribute with the value container,

63
00:04:34,980 --> 00:04:40,730
we'll go back to our selectors.css file,
and let's go ahead and

64
00:04:40,730 --> 00:04:45,000
target the div then write a set of
square brackets.

65
00:04:45,000 --> 00:04:50,110
Then we're going to type id equals and the
value will be container.

66
00:04:53,010 --> 00:04:55,690
And inside the curly braces, let's go
ahead and

67
00:04:55,690 --> 00:05:00,840
add a max-width property, and set the value
to 500 pixels.

68
00:05:00,840 --> 00:05:07,080
And right below that, let's add a margin
property, and we'll set the value to auto.

69
00:05:07,080 --> 00:05:12,940
So now, when we save our selectors.css
file and refresh the page.

70
00:05:12,940 --> 00:05:16,520
We can see that it targets the main
container div on the page.

71
00:05:18,480 --> 00:05:23,420
So now if we ever see selectors written
this way in a style sheet,

72
00:05:23,420 --> 00:05:24,860
we know exactly what they mean.

73
00:05:26,410 --> 00:05:29,890
Well, now you may be asking, why target
elements with

74
00:05:29,890 --> 00:05:34,740
attribute selectors instead of the classes
or ids we learned about earlier.

75
00:05:34,740 --> 00:05:38,470
Well, most of the time there's no real
advantage to using these

76
00:05:38,470 --> 00:05:42,950
attribute selectors when it comes to
targeting ids and class attributes.

77
00:05:42,950 --> 00:05:46,590
It's usually best to use a class or id
selector, in this case.

78
00:05:46,590 --> 00:05:48,180
So, let's go ahead and do that.

79
00:05:48,180 --> 00:05:51,700
I'm gonna replace the first attribute
selector

80
00:05:51,700 --> 00:05:55,990
with the form contact class selector.

81
00:05:55,990 --> 00:05:57,398
Then right below,

82
00:05:57,398 --> 00:06:03,130
we'll replace the next attribute selector
with the id selector container.

83
00:06:04,170 --> 00:06:07,710
So as we can see, these are a little more
readable for us.

84
00:06:07,710 --> 00:06:12,600
Now, attribute selectors can also be a bit
slower to interpret then a class or id.

85
00:06:12,600 --> 00:06:14,280
Even for the browser.

86
00:06:14,280 --> 00:06:18,760
In some cases, the browser has to do a
little extra work to interpret and

87
00:06:18,760 --> 00:06:22,130
parse complex attribute selectors.

88
00:06:22,130 --> 00:06:25,650
But, as I mentioned earlier, attribute
selectors come in

89
00:06:25,650 --> 00:06:31,730
handy when styling form elements, for
instance, the type attribute.

90
00:06:31,730 --> 00:06:36,780
An input element is what determines the
function of an input element.

91
00:06:36,780 --> 00:06:41,810
So, say we have a lot of input elements on
the page, which we kind of do here, and

92
00:06:41,810 --> 00:06:47,140
we only want to target input elements with
a type attribute of text.

93
00:06:48,580 --> 00:06:54,330
So, we'll go back to our style sheet, and
let's target input elements

94
00:06:54,330 --> 00:06:59,220
that have a type attribute with the value
text.

95
00:07:02,690 --> 00:07:06,580
Then we're going to add a background
property.

96
00:07:06,580 --> 00:07:13,092
And we're going to set the background
color to a hex value of #fdfee6.

97
00:07:15,410 --> 00:07:17,740
So now when we save our style sheet and

98
00:07:17,740 --> 00:07:22,490
refresh the browser, notice how only those
two input fields with

99
00:07:22,490 --> 00:07:28,370
a type attribute value of text take on the
light yellow background color.

100
00:07:28,370 --> 00:07:31,070
But in our case, we'd like to give form
fields with

101
00:07:31,070 --> 00:07:34,730
a placeholder attribute that light yellow
background instead.

102
00:07:34,730 --> 00:07:38,600
So, let's go back to our selector and

103
00:07:38,600 --> 00:07:42,970
change the attribute in our selector to
placeholder.

104
00:07:42,970 --> 00:07:47,940
So, we're gonna replace type equals text
with the placeholder attribute.

105
00:07:50,680 --> 00:07:53,210
And now when we save our style sheet, and

106
00:07:53,210 --> 00:07:56,708
take a look at it again, we can see how
the only field with

107
00:07:56,708 --> 00:08:01,934
that light yellow background is the email
field with that placeholder attribute.

108
00:08:01,934 --> 00:08:05,394
[BLANK_AUDIO]

109
00:08:05,394 --> 00:08:08,827
Let's say that later, we realize that we
don't exactly need to

110
00:08:08,827 --> 00:08:11,520
target every field with a placeholder
attribute.

111
00:08:11,520 --> 00:08:14,590
Just the ones that accept an email
address.

112
00:08:14,590 --> 00:08:21,480
Well, now we can go back, and once again
define the type attribute in our selector.

113
00:08:21,480 --> 00:08:25,910
So this time, we'll replace placeholder
with the type attribute.

114
00:08:25,910 --> 00:08:29,360
And this time, we're gonna target the
value email.

115
00:08:31,090 --> 00:08:36,040
So when we save and refresh the page, we
can see how it targets the same form

116
00:08:36,040 --> 00:08:40,490
field because if we go back to our index
file and take a look at the input element,

117
00:08:40,490 --> 00:08:44,340
it does indeed have a type attribute with
the valid email