Element States Pseudo-Classes

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