Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Selectors Quickstart

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The Power of Pseudo-classes and Combinators

1:29 with Guil Hernandez

Pseudo-classes select elements dynamically based on their state, as well as their position in a group of sibling elements, and more. Selectors use combinators to target elements based on how they are related to one another.

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    In this stage you’re going to learn about the power and 0:04
    flexibility of pseudo-classes and combinators in CSS selectors. 0:07
    Elements on a webpage have different states. 0:11
    For example, links and buttons have a hover state as well as active and 0:13
    focused states, and text fields also have a focus state. 0:17
    CSS provides pseudo-class selectors that match 0:21
    HTML elements based on their state and a user's actions. 0:24
    For example, select a button as a user hovers their mouse over it and 0:28
    change it's background and text color. 0:32
    A pseudo-class is a keyword added to a selector 0:35
    that specifies a special state of the selected element or elements. 0:38
    Pseudo-classes not only target elements dynamically based on their state, but 0:42
    also their position in a group of sibling elements and more. 0:47
    You've learned how to target one element or 0:51
    a set of matching elements at a time using type, ID, and class selectors. 0:53
    In this stage you're also going to learn how CSS gives you a more fine grained 0:58
    approach to targeting elements with combinators. 1:02
    Combinators select elements based on how they are related to one another. 1:05
    For example, a combinator can target a specific descendant of an element, 1:09
    it can target only elements that are direct children of a parent, or 1:14
    target an immediate sibling element and 1:18
    general siblings that follow a specific type of element. 1:20
    In the next step you'll start by working with dynamic pseudo-classes. 1:24
    On we go. 1:28

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up