CSS Selectors Course (How To)

In this short course, we're going to go beyond the basic selector concepts covered in CSS Basics. Besides the common ways to select elements with type, ID and class selectors, we're able to target elements based on their attributes, position in the HTML document, even their relation to other elements.

By the end of this course, you'll have gained a better understanding of the power and flexibility behind CSS selectors. You'll have a new set of valuable tools in your CSS toolkit to use on your next project.

What you'll learn

• Attribute selectors
• Advanced pseudo-classes
• Pseudo-elements

Selectors - Beyond the Basics

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

Chevron 8 steps

• 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.

Chevron 8 steps

• :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.

Chevron 11 steps

• :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