CSS Selectors

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.

  • Course Overview1:49
  • Attribute Selectors8:44
  • Styling Form Buttons and Links with Attribute Selectors3:34
  • Attribute Selectors Challenge3 objectives
  • DRY CSS10:51
  • Child, Adjacent, and General Sibling Combinators9:03
  • Combinators Challenge2 objectives
  • Attribute Selectors and Combinators Review5 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-child4:15
  • :first-child and :last-child Challenge2 objectives
  • :only-child and :empty4:58
  • Substring Matching Attribute Selectors - "Begins With" and "Ends With"8:19
  • Substring Matching Attribute Selectors - "Contains"6:44
  • Substring Matching Attribute Selectors Challenge3 objectives
  • Element States Pseudo-Classes6:20
  • Structural and Element States Pseudo-Classes Review5 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-child8:00
  • :nth-of-type4:30
  • :nth Pseudo-Class Challenge3 objectives
  • :nth Pseudo-Class Challenge - Pt. 21 objective
  • :root and :target5:12
  • :not() – The Negation Pseudo-Class4:46
  • Pseudo-Elements - ::first-line and ::first-letter5:00
  • Pseudo-Elements - ::before and ::after8:13
  • The attr() CSS Function6:32
  • Pseudo-Elements Challenge4 objectives
  • Advanced Selectors Review6 questions

results matching ""

    No results matching ""