Photograph of a fishing net cast from a sampan on a lake, backlit by the sun, in Guanting, China

Selectors are the proper nouns of . 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

  1. Selector Syntax
  2. The Universal Selector
  3. The Element Selector
  4. Grouping Selectors
  5. Descendant Selectors
  6. id
  7. class
  8. Attribute selector
  9. Child Selector
  10. Sibling Selector
  11. The Limits of Selectors
  12. 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.