Bummer!

This is just a preview. You need to be signed in with a Basic or Pro account to view the entire video.

Start a free Silver trial
to watch this video

Sign up for Treehouse

UI Element States Pseudo-Classes

5:09

UI element states pseudo-classes target elements based on certain user interaction states. That’s why they’re most commonly used for styling form elements.


Teacher's Notes

Quick Reference

Video Transcript

  • 0:00

    [Guil Hernandez] UI element states pseudo classes let us target elements based on certain user-interaction states.

  • 0:06

    That's why they're most commonly used for styling form elements. Let's take a look.

  • 0:12

    So in our HTML file we have a few basic form elements like text fields, radio buttons, and a submit button.

  • 0:20

    And in our style sheet, I've already created a few base styles using some of the type and element selectors we learned in previous lessons.

  • 0:29

    This is what it's looking like so far in the browser.

  • 0:33

    So let's go ahead and enhance how we interact with this form using the 3 CSS US element states pseudo-classes.

  • 0:41

    One of the element UI element state selector is the enabled selector, which selects UI elements that are in an enabled state,

  • 0:52

    such as a button or a text field.

  • 0:56

    When a form element is enabled, it can be active and gain focus.

  • 1:02

    So it can also be selected, clicked on, and accept text input.

  • 1:09

    So let's go ahead and create an enabled selector for our text fields.

  • 1:15

    In our style.css file, right before the enabled pseudo-class, I will go ahead and type "input" since we're selecting the text fields,

  • 1:25

    followed by a set of square brackets.

  • 1:28

    Inside the square brackets, I will include the type attribute, followed by "text."

  • 1:34

    So we've created that input type = "text" attribute selector, and we're then targeting its enabled state.

  • 1:43

    Inside the curly braces, we'll go ahead and add a background property, and we will give it a light-yellow color value.

  • 1:53

    So we will save the style sheet and refresh the browser, and there we see how the text fields take on the light-yellow background,

  • 2:04

    because all form elements by default are enabled.

  • 2:08

    To target disabled form elements, we'll then need to use the disabled pseudo-class.

  • 2:15

    So right underneath our enabled selector, we will go ahead and type "disabled."

  • 2:22

    The disabled pseudo-class selects UI elements like buttons and form inputs that are in a disabled state.

  • 2:30

    When an element is disabled, it cannot be selected, clicked on, or accept text input.

  • 2:37

    So in our HTML file I'll go ahead and add the disabled Boolean attribute to one of the text fields.

  • 2:45

    So I'll save our HTML file and go back to our CSS file, and I will add a background property in a light-gray color value.

  • 2:56

    So when we save and refresh, we see that the fields with the disabled attribute is the only one with the light-gray background.

  • 3:08

    Now the email field cannot obtain focus or be typed in because we have disabled it in the HTML.

  • 3:16

    The CSS selector then, set to the background to light gray.

  • 3:21

    So finally, the checked pseudo-class lets us style UI elements that are in a checked state, such as a text box or a radio button.

  • 3:32

    So let's take advantage of the checked state of our radio buttons here and create a selector

  • 3:38

    that will style our labels with a new font weight and font size once a radio button is selected or checked.

  • 3:49

    Now because we're targeting the label that's adjacent to our radio buttons, we'll use some familiar selectors to target those labels.

  • 4:00

    So in our CSS file, we'll first create an attribute selector to select input elements whose type attribute is "radio."

  • 4:12

    We'll then add the checked pseudo-class followed by the plus sign or the adjacent sibling combinator

  • 4:20

    to select the label that is an immediate sibling of the radio button.

  • 4:27

    We'll then add a font-size property and the value 22 pixels, followed by a font weight of bold.

  • 4:38

    So we'll go ahead and save our CSS file.

  • 4:41

    And in the browser when we refresh it, we see that once a radio button is clicked,

  • 4:48

    the label that follows it takes on the font size and font-weight styles.

  • 4:57

    The pseudo-classes have support in the major browsers, including i9 and above.

  • 5:02

    Next we'll learn how pseudo-elements can target certain virtual elements that are not specified in the market.

Show full transcript

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Guil Hernandez

    Guil is the front-end design teacher at Treehouse. You can follow him on Twitter at @guilh.