1
00:00:00,160 --> 00:00:04,110
So once again, we'll need to launch a new
work space for this lesson.

2
00:00:04,110 --> 00:00:06,840
And once we click the preview button for
our work space,

3
00:00:06,840 --> 00:00:10,890
we can see how it brings up the contact
form we used in the previous stage,

4
00:00:10,890 --> 00:00:13,400
with the addition of a few check boxes.

5
00:00:13,400 --> 00:00:18,770
So back in the CSS basics course, we
covered user action pseudo-classes that

6
00:00:18,770 --> 00:00:22,430
target elements based on the user's
interaction with an element.

7
00:00:22,430 --> 00:00:25,510
So let's do a quick review of one of those
selectors.

8
00:00:25,510 --> 00:00:31,580
So I'm gonna open up the style.css file
inside the CSS directory.

9
00:00:31,580 --> 00:00:37,510
So for example to style a text field and
text area once they have received focus,

10
00:00:37,510 --> 00:00:41,450
we can add the focus pseudo class to a
selector.

11
00:00:41,450 --> 00:00:45,580
So let's target input elements and add
the

12
00:00:45,580 --> 00:00:50,163
focus pseudo class and we're going to
group this with the textarea,

13
00:00:50,163 --> 00:00:56,130
element selector and we're also gonna give
it the focus pseudo class.

14
00:00:56,130 --> 00:01:02,030
And on focus we're gonna change those
element's border color to an aqua green.

15
00:01:02,030 --> 00:01:07,550
So let's set it to a hex value of pounds
five two b a b three.

16
00:01:07,550 --> 00:01:11,396
So, once we save our stylesheet and
refresh the page,

17
00:01:11,396 --> 00:01:16,760
notice how once we click inside a field,
the border color turns aqua green.

18
00:01:16,760 --> 00:01:17,918
[BLANK_AUDIO]

19
00:01:17,918 --> 00:01:22,420
So, very similar to these user action
pseudoclasses.

20
00:01:22,420 --> 00:01:26,610
CSS also has UI element states pseudo
classes that let

21
00:01:26,610 --> 00:01:30,360
us target elements based on a few other
user interaction states and

22
00:01:30,360 --> 00:01:32,930
their most commonly used first styling
form elements.

23
00:01:32,930 --> 00:01:36,040
So let's take a look at two of the most
common ones.

24
00:01:36,040 --> 00:01:40,870
So one of the UI element state selectors
is the disabled selector.

25
00:01:40,870 --> 00:01:46,230
Which selects UI elements like buttons or
input fields that are in disabled state.

26
00:01:46,230 --> 00:01:50,160
So, all form fields and buttons by default are usually enabled.

27
00:01:50,160 --> 00:01:54,830
But when an element is disabled, we cannot
select it or click on it.

28
00:01:54,830 --> 00:01:58,460
And if it's a text field, it cannot accept
any input.

29
00:01:58,460 --> 00:02:02,500
So, to target any disabled form element.

30
00:02:02,500 --> 00:02:06,238
We'll need to write the disabled
pseudo-class by typing colon,

31
00:02:06,238 --> 00:02:10,380
followed by disabled.

32
00:02:10,380 --> 00:02:15,990
And then let's change a disabled element's
background, to light grey.

33
00:02:15,990 --> 00:02:20,820
So, we're gonna define a hex value, pound
ddd, which as we can see,

34
00:02:20,820 --> 00:02:22,850
gives us a light shade of grey.

35
00:02:22,850 --> 00:02:27,910
So now this will target all UI elements
that are in a disabled state.

36
00:02:27,910 --> 00:02:33,730
Which currently, if we take a look at our
index.html file, none of them are.

37
00:02:33,730 --> 00:02:39,340
So, we'll need to add a disabled boolean
attribute to one of our text fields.

38
00:02:39,340 --> 00:02:42,440
So let's add it to our email field.

39
00:02:43,880 --> 00:02:45,120
So right here on line 19,

40
00:02:45,120 --> 00:02:51,860
right after the placeholder attribute,
let's go ahead and type disabled.

41
00:02:54,720 --> 00:02:58,590
So once we do that, let's save our HTML
file, and let's go back and

42
00:02:58,590 --> 00:03:00,110
save our style sheet.

43
00:03:00,110 --> 00:03:03,800
And we'll bring up the preview, and hit
refresh.

44
00:03:03,800 --> 00:03:08,460
So now we're able to see that the field
with the disabled attribute, so

45
00:03:08,460 --> 00:03:12,570
the Email field, is the only element with
the light gray background.

46
00:03:12,570 --> 00:03:15,830
And notice how I'm not able to click
inside and

47
00:03:15,830 --> 00:03:18,660
add any text, because it's disabled.

48
00:03:18,660 --> 00:03:22,390
Now if we need to be more specific we can
tell the browser that we only one to

49
00:03:22,390 --> 00:03:24,260
target disabled input elements.

50
00:03:24,260 --> 00:03:28,670
And we'll do that by simply adding the
input type selector,

51
00:03:28,670 --> 00:03:30,550
right before the pseudo class.

52
00:03:32,020 --> 00:03:34,690
Next, with the checked pseudo class,

53
00:03:34,690 --> 00:03:37,770
we can install form elements that are in a
checked state.

54
00:03:37,770 --> 00:03:40,350
Like a check box or radio button.

55
00:03:40,350 --> 00:03:45,330
So let's use the checked state of our three
check boxes down here, and

56
00:03:45,330 --> 00:03:50,770
we're going to create a selector that
highlights the sibling label elements

57
00:03:50,770 --> 00:03:55,100
with a bold font weight once a check box
is checked.

58
00:03:55,100 --> 00:03:59,960
And since we're gonna want to target the
label that's adjacent to a check box.

59
00:03:59,960 --> 00:04:03,840
We're going to use a familiar selector to
target them.

60
00:04:03,840 --> 00:04:10,680
So first, let's use an attribute selector
to select input elements

61
00:04:12,020 --> 00:04:16,120
whose type attribute is checkbox.

62
00:04:18,380 --> 00:04:24,380
Then after the square brackets we're going
to add the checked pseudo class.

63
00:04:24,380 --> 00:04:29,850
Then we'll use the plus sign or the
adjacent sibling combinator to select

64
00:04:29,850 --> 00:04:34,850
the label that is an immediate sibling of
the check box.

65
00:04:37,340 --> 00:04:41,210
So if we go back and take a look at the
HTML for our labels and

66
00:04:41,210 --> 00:04:47,000
checkboxes, notice how each set of labels
and checkboxes are sibling elements.

67
00:04:47,000 --> 00:04:51,750
So let's add a font-weight property.

68
00:04:51,750 --> 00:04:53,700
And set the value to bold.

69
00:04:53,700 --> 00:04:55,020
All right.

70
00:04:55,020 --> 00:04:59,620
So once we save our style sheet, and bring
up the preview and hit Refresh.

71
00:04:59,620 --> 00:05:02,280
Once a check box is checked or

72
00:05:02,280 --> 00:05:07,240
in a checked state, that adjacent label
takes on the bold font weight style.

73
00:05:09,020 --> 00:05:12,530
Before we move on, let's do a quick review
of some of what we've learned so

74
00:05:12,530 --> 00:05:17,080
far about structural pseudo-classes,
substring matching attribute selectors,

75
00:05:17,080 --> 00:05:19,600
and element state pseudo-classes.

76
00:05:19,600 --> 00:05:22,930
First, the first child and last child
pseudo classes,

77
00:05:22,930 --> 00:05:27,930
let us select elements that are the first
or last child of a parent element.

78
00:05:27,930 --> 00:05:30,490
We're also able to target elements with no
siblings,

79
00:05:30,490 --> 00:05:32,660
with the only child pseudo class.

80
00:05:32,660 --> 00:05:35,390
And we can target empty elements, with no
children or

81
00:05:35,390 --> 00:05:38,530
content with the empty pseudo class.

82
00:05:38,530 --> 00:05:42,670
And with substring matching attribute
selectors we can match specific pieces of

83
00:05:42,670 --> 00:05:43,940
an attribute's value.

84
00:05:43,940 --> 00:05:46,110
Like certain letters or words.

85
00:05:46,110 --> 00:05:48,990
The caret character tells the browser to
match a piece of code,

86
00:05:48,990 --> 00:05:51,520
that's at the beginning of an attribute's
value.

87
00:05:51,520 --> 00:05:55,950
While the dollar sign matches a piece at
the end of an attribute's value.

88
00:05:55,950 --> 00:05:59,480
And with the asterisk, we can match any
part of an attribute's value.

89
00:05:59,480 --> 00:06:00,700
So many of these selectors,

90
00:06:00,700 --> 00:06:03,910
can come to our rescue when we don't have
control over the HTML.

91
00:06:05,030 --> 00:06:08,520
Finally, when styling forms, we can target
certain element states,

92
00:06:08,520 --> 00:06:12,770
like the checked state of a radio button
and check box or a disabled text field.

93
00:06:13,770 --> 00:06:16,950
Up next we'll take a close look at more
advanced selectors,

94
00:06:16,950 --> 00:06:19,930
we can use to make our style sheets
cleaner and more powerful.