The Power of Pseudo-classes and Combinators

[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