CSS Selectors
Treehouse
Course Summary
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.
-
+
Course Description
About this Course 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
About the Teacher
Guil is a front end web development teacher at Treehouse. You can follow him on Twitter at @guilh.
-
+
Course Syllabus
Selectors - Beyond the Basics
In this stage, we'll expand on basic concepts by learning all about attribute selectors, DRY CSS, and combinators. 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. 8 stepsAdvanced 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. 11 steps