So once again, we'll need to launch a new work space for this lesson.

And once we click the preview button for our work space,

we can see how it brings up the contact form we used in the previous stage,

with the addition of a few check boxes.

So back in the CSS basics course, we covered user action pseudo-classes that

target elements based on the user's interaction with an element.

So let's do a quick review of one of those selectors.

So I'm gonna open up the style.css file inside the CSS directory.

So for example to style a text field and text area once they have received focus,

we can add the focus pseudo class to a selector.

So let's target input elements and add the.

Focus pseudo class and we're going to group this with the text area,

element selector and we're also gonna give it the focus pseudo class.

And on focus we're gonna change those element's border color to an aqua green.

So let's set it to a hex value of pounds five two b a b three.

So, once we save our stylesheet and refresh the page,

notice how once we click inside a field, the border color turns aqua green.

[BLANK_AUDIO]

So, very similar to these user action pseudoclasses.

CSS also has ui element states pseudo classes that let

us target elements based on a few other user interaction states and

their most commonly used first styling form elements.

So lets take a look at two of the most common ones.

So one of the ui element state selectors is the disabled selector.

Which selects UI elements like buttons or input fields that are in disabled state.

So, all form fields and buttons by default are usually enabled.

But when an element is disabled, we cannot select it or click on it.

And if it's a text field, it cannot accept any input.

So, to target any disabled form element.

We'll need to write the disabled pseudo-class by typing colon,

followed by disabled.

And then let's change a disabled element's background, to light grey.

So, we're gonna define a hex value, pound ddd, which as we can see,

gives us a light shade of grey.

So now this will target all UI elements that are in a disabled state.

Which currently, if we take a look at our index.html file, none of them are.

So, we'll need to add a disabled boolean attribute to one of our text fields.

So let's add it to our email field.

So right here on line 19,

right after the placeholder attribute, let's go ahead and type disabled.

So once we do that, let's save our HTML file, and let's go back and

save our style sheet.

And we'll bring up the preview, and hit refresh.

So now we're able to see that the field with the disabled attribute, so

the Email field, is the only element with the light gray background.

And notice how I'm not able to click inside and

add any text, because it's disabled.

Now if we need to be more specific we can tell the browser that we only one to

target disabled input elements.

And we'll do that by simply adding the input type selector,

right before the pseudo class.

Next, with the check pseudo class,

we can install form elements that are in a check state.

Like a check box or radio button.

So lets use the checked state of our three check boxes down here, and

we're going to create a selector that highlights the sibling label elements

with a bold font weight once a check box is checked.

And since we're gonna want to target the label that's adjacent to a check box.

We're going to use a familiar selector to target them.

So first, let's use an attribute selector to select input elements

whose type attribute is checkbox.

Then after the square brackets we're going to add the checked pseudo class.

Then we'll use the plus sign or the adjacent sibling combinator to select

the label that is an immediate sibling of the check box.

So if we go back and take a look at the HTML for our labels and

checkboxes, notice how each set of labels and checkboxes are sibling elements.

So let's add a font-weight property.

And set the value to bold.

All right.

So once we save our style sheet, and bring up the preview and hit Refresh.

Once a check box is checked or

in a checked state, that adjacent label takes on the bold font weight style.

Before we move on, let's do a quick review of some of what we've learned so

far about structural pseudo-classes, substring matching attribute selectors,

and element state pseudo-classes.

First, the first child and last child pseudo classes,

let us select elements that are the first or last child of a parent element.

We're also able to target elements with no siblings,

with the only child pseudo class.

And we can target empty elements, with no children or

content with the empty pseudo class.

And with substring matching attribute selectors we can match specific pieces of

an attribute's value.

Like certain letters or words.

The caret character tells the browser to match a piece of code,

that's at the beginning of an attribute's value.

While the dollar sign matches a piece at the end of an attribute's value.

And with the asterisk, we can match any part of an attribute's value.

So many of these selectors,

can come to our rescue when we don't have control over the HTML.

Finally, when styling forms, we can target certain element states,

like the checked state of a radio button and check box or a disabled text field.

Up next we'll take a close look at more advanced selectors,

we can use to make our style sheets cleaner and more powerful.