[MUSIC]

In this stage you’re going to learn about the power and

flexibility of pseudo-classes and combinators in CSS selectors.

Elements on a webpage have different states.

For example, links and buttons have a hover state as well as active and

focused states, and text fields also have a focus state.

CSS provides pseudo-class selectors that match

HTML elements based on their state and a user's actions.

For example, select a button as a user hovers their mouse over it and

change it's background and text color.

A pseudo-class is a keyword added to a selector

that specifies a special state of the selected element or elements.

Pseudo-classes not only target elements dynamically based on their state, but

also their position in a group of sibling elements and more.

You've learned how to target one element or

a set of matching elements at a time using type, ID, and class selectors.

In this stage you're also going to learn how CSS gives you a more fine grained

approach to targeting elements with combinators.

Combinators select elements based on how they are related to one another.

For example, a combinator can target a specific descendant of an element,

it can target only elements that are direct children of a parent, or

target an immediate sibling element and

general siblings that follow a specific type of element.

In the next step you'll start by working with dynamic pseudo-classes.

On we go.