CSS Selectors Quickstart Course (How To)

An introduction to CSS selectors for JavaScript programmers. This course covers what you need to know about CSS selectors to complete common DOM programming tasks.

What you'll learn

• Type, ID, and class selectors
• Attribute selectors
• Pseudo-classes
• Data attributes
• The role of CSS selectors in JavaScript

CSS Selector Basics

In this stage, you will learn common CSS selectors that target elements based on their type, ID, class and attributes.

Chevron 7 steps

• Introduction

  1:53

• instruction

  Type Selectors

• instruction

  ID Selectors

• instruction

  Class Selectors

• Basic Selectors Challenge

  5 objectives

• instruction

  Attribute Selectors

• Attribute Selectors Challenge

  4 objectives

Pseudo-classes and Combinators

Learn pseudo-classes that select elements based on their state and a user's actions. You'll also use a more fine-grained approach to targeting elements with combinators.

Chevron 9 steps

• The Power of Pseudo-classes and Combinators

  1:29

• instruction

  Pseudo-classes

• Pseudo-classes Challenge

  3 objectives

• instruction

  Descendant Selectors

• instruction

  CSS Combinators

• Combinators Challenge

  4 objectives

• instruction

  :first-child and :last-child Pseudo-classes

• instruction

  :nth-child() Pseudo-class

• Pseudo-classes Challenge

  4 objectives

The Role of Selectors in JavaScript

Learn how JavaScript uses selectors to control an element's behavior and apply functionality to the page.

Chevron 6 steps

• CSS Selectors and JavaScript

  2:12

• instruction

  Control Elements with JavaScript and Selectors

• instruction

  Prefix Classes for JavaScript

• instruction

  Custom Data Attributes

• instruction

  Next Steps with CSS Selectors and JavaScript

• Selectors in JavaScript Review

  6 questions