Selectors are the proper nouns of CSS. Used by themselves or in combination with each other, selectors allow developers to reach elements and content on web pages and control their appearance using properties and values.
The wide variety of selectors makes it unlikely that reading every reference in this list during a single sitting will prove helpful to most developers: unlike specific CSS properties, which must be used to fulfill a particular design goal, there are usually at least half a dozen ways to reach any element using different selectors or combinators (the operational symbols between selectors that allow greater definition of what you are affecting). Advanced selectors will often be more efficient than simpler ones, and take less work to achieve the same goal, but many web pages only demand that you know the first four or five basic selection techniques to get things started.
My recommendation would be to return to this and other resources as you learn, discovering better ways to make use of selectors in your CSS.
Goals: Select elements on web pages using different methods, customizing their appearance.
Prerequisite: Introduction to CSS
Total practice time: 8 hours
Selector Syntax
The Universal Selector
The Element Selector
Grouping Selectors
Descendant Selectors
id
class
Attribute selector
Child Selector
Sibling Selector
- The Limits of Selectors
CSS Variables
Optional
Read how the inherit value can make writing CSS styles easier.
Supplementary Material
Read Lesson 3: Complex Selectors in Shay Howe’s 
Advanced Guide to HTML & CSS
Read CSS Selectors in the Web Platform Docs.
Play CSS Plates, a fun little coding web game that helps you learn selectors.
Step through Ville Vanninen’s CSS Vocabulary to become familiar with how various CSS selectors are applied.
When You’re Done
The reality is that, just like nouns, you’ll probably never be done with CSS selectors: new ones are always being proposed, and you will constantly find new ways of using the existing syntax. The more flexibility you have with selectors, the easier your CSS and markup will become: better selection techniques usually mean lighter markup, with fewer “hooks” and less repetition, giving you more power and time to make better web pages.
Photograph by Bobby Chen, used with permission.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
