CSS Selectors Course (How To)

Selectors - Beyond the Basics

In this stage, we'll expand on basic concepts by learning all about attribute selectors, DRY CSS, and combinators.

• Course Overview

  1:49

• Attribute Selectors

  8:44

• Styling Form Buttons and Links with Attribute Selectors

  3:34

• Attribute Selectors Challenge

  3 objectives

• DRY CSS

  10:51

• Child, Adjacent, and General Sibling Combinators

  9:03

• Combinators Challenge

  2 objectives

• Attribute Selectors and Combinators Review

  5 questions

Going Further with Attribute Selectors and Pseudo-Classes

Learn how to select elements without having to write extra classes or IDs in the markup. Target elements based on specific pieces of HTML attributes, user interaction states, or their position on the page.

• :first-child and :last-child

  4:15

• :first-child and :last-child Challenge

  2 objectives

• :only-child and :empty

  4:58

• Substring Matching Attribute Selectors - "Begins With" and "Ends With"

  8:19

• Substring Matching Attribute Selectors - "Contains"

  6:44

• Substring Matching Attribute Selectors Challenge

  3 objectives

• Element States Pseudo-Classes

  6:20

• Structural and Element States Pseudo-Classes Review

  5 questions

Advanced Selectors

In this stage, we'll uncover the power behind many of the more advanced CSS selectors. Learn how to write selectors with simple expressions to target a combination of elements. We'll also use special selectors called pseudo-elements to insert virtual elements and content into our page.

• :nth-child

  8:00

• :nth-of-type

  4:30

• :nth Pseudo-Class Challenge

  2 objectives

• :nth Pseudo-Class Challenge - Pt. 2

  1 objective

• :root and :target

  5:12

• :not() – The Negation Pseudo-Class

  4:46

• Pseudo-Elements - ::first-line and ::first-letter

  5:00

• Pseudo-Elements - ::before and ::after

  8:13

• The attr() CSS Function

  6:32

• Pseudo-Elements Challenge

  4 objectives

• Advanced Selectors Review

  6 questions