Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Like user-action pseudo classes, CSS has UI element states pseudo-classes that let us target elements based on user interaction states.
Related Videos
Quick Reference
Using :disabled and :checked
To target a disabled input element, we can write:
input:disabled {
background-color: grey;
}
To target a radio button or checkbox when checked, we can write:
:checked {
border-color: red;
}
So once again, we'll need to launch a new
work space for this lesson.
0:00
And once we click the preview button for
our work space,
0:04
we can see how it brings up the contact
form we used in the previous stage,
0:06
with the addition of a few check boxes.
0:10
So back in the CSS basics course, we
covered user action pseudo-classes that
0:13
target elements based on the user's
interaction with an element.
0:18
So let's do a quick review of one of those
selectors.
0:22
So I'm gonna open up the style.css file
inside the CSS directory.
0:25
So for example to style a text field and
text area once they have received focus,
0:31
we can add the focus pseudo class to a
selector.
0:37
So let's target input elements and add
the.
0:41
Focus pseudo class and we're going to
group this with the text area,
0:45
element selector and we're also gonna give
it the focus pseudo class.
0:50
And on focus we're gonna change those
element's border color to an aqua green.
0:56
So let's set it to a hex value of pounds
five two b a b three.
1:02
So, once we save our stylesheet and
refresh the page,
1:07
notice how once we click inside a field,
the border color turns aqua green.
1:11
[BLANK_AUDIO]
1:16
So, very similar to these user action
pseudoclasses.
1:17
CSS also has ui element states pseudo
classes that let
1:22
us target elements based on a few other
user interaction states and
1:26
their most commonly used first styling
form elements.
1:30
So lets take a look at two of the most
common ones.
1:32
So one of the ui element state selectors
is the disabled selector.
1:36
Which selects UI elements like buttons or
input fields that are in disabled state.
1:40
So, all form fields and buttons by default are usually enabled.
1:46
But when an element is disabled, we cannot
select it or click on it.
1:50
And if it's a text field, it cannot accept
any input.
1:54
So, to target any disabled form element.
1:58
We'll need to write the disabled
pseudo-class by typing colon,
2:02
followed by disabled.
2:06
And then let's change a disabled element's
background, to light grey.
2:10
So, we're gonna define a hex value, pound
ddd, which as we can see,
2:15
gives us a light shade of grey.
2:20
So now this will target all UI elements
that are in a disabled state.
2:22
Which currently, if we take a look at our
index.html file, none of them are.
2:27
So, we'll need to add a disabled boolean
attribute to one of our text fields.
2:33
So let's add it to our email field.
2:39
So right here on line 19,
2:43
right after the placeholder attribute,
let's go ahead and type disabled.
2:45
So once we do that, let's save our HTML
file, and let's go back and
2:54
save our style sheet.
2:58
And we'll bring up the preview, and hit
refresh.
3:00
So now we're able to see that the field
with the disabled attribute, so
3:03
the Email field, is the only element with
the light gray background.
3:08
And notice how I'm not able to click
inside and
3:12
add any text, because it's disabled.
3:15
Now if we need to be more specific we can
tell the browser that we only one to
3:18
target disabled input elements.
3:22
And we'll do that by simply adding the
input type selector,
3:24
right before the pseudo class.
3:28
Next, with the check pseudo class,
3:32
we can install form elements that are in a
check state.
3:34
Like a check box or radio button.
3:37
So lets use the checked state of our three
check boxes down here, and
3:40
we're going to create a selector that
highlights the sibling label elements
3:45
with a bold font weight once a check box
is checked.
3:50
And since we're gonna want to target the
label that's adjacent to a check box.
3:55
We're going to use a familiar selector to
target them.
3:59
So first, let's use an attribute selector
to select input elements
4:03
whose type attribute is checkbox.
4:12
Then after the square brackets we're going
to add the checked pseudo class.
4:18
Then we'll use the plus sign or the
adjacent sibling combinator to select
4:24
the label that is an immediate sibling of
the check box.
4:29
So if we go back and take a look at the
HTML for our labels and
4:37
checkboxes, notice how each set of labels
and checkboxes are sibling elements.
4:41
So let's add a font-weight property.
4:47
And set the value to bold.
4:51
All right.
4:53
So once we save our style sheet, and bring
up the preview and hit Refresh.
4:55
Once a check box is checked or
4:59
in a checked state, that adjacent label
takes on the bold font weight style.
5:02
Before we move on, let's do a quick review
of some of what we've learned so
5:09
far about structural pseudo-classes,
substring matching attribute selectors,
5:12
and element state pseudo-classes.
5:17
First, the first child and last child
pseudo classes,
5:19
let us select elements that are the first
or last child of a parent element.
5:22
We're also able to target elements with no
siblings,
5:27
with the only child pseudo class.
5:30
And we can target empty elements, with no
children or
5:32
content with the empty pseudo class.
5:35
And with substring matching attribute
selectors we can match specific pieces of
5:38
an attribute's value.
5:42
Like certain letters or words.
5:43
The caret character tells the browser to
match a piece of code,
5:46
that's at the beginning of an attribute's
value.
5:48
While the dollar sign matches a piece at
the end of an attribute's value.
5:51
And with the asterisk, we can match any
part of an attribute's value.
5:55
So many of these selectors,
5:59
can come to our rescue when we don't have
control over the HTML.
6:00
Finally, when styling forms, we can target
certain element states,
6:05
like the checked state of a radio button
and check box or a disabled text field.
6:08
Up next we'll take a close look at more
advanced selectors,
6:13
we can use to make our style sheets
cleaner and more powerful.
6:16
You need to sign up for Treehouse in order to download course files.
Sign up