Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

The Basics of Selectors

CSS selectors are the least understood part of the language, but a good understanding of selectors and their uses is a hallmark of a good professional developer. Here's your chance to really get to grips with the sophistication of CSS selectors.

Type Selectors

A CSS selector specifies which HTML elements a particular statement will style. The simplest kind of selector of the dozen or so is the HTML element, or type selector. These selectors use just the name of an HTML element (for example p, h3, or body), and select every element of that type. So p selects every paragraph, h3 selects every heading of level three, and body selects the body of the document (an HTML document can have only one body).

Grouping Selectors Together

We can group selectors so that the same declaration block of properties applies to all of elements selected by any of the selectors in the group. A selector group is simply the selectors separated by commas. For example, to select all heading levels at once, we can use the selector:

h1, h2, h3, h4, h5, h6

As we'll see later, we can group together selectors of different kinds. Selector groups produce more compact, readable, and maintainable style sheets. For example, if all headings in a document use the same font, we can simply use the selector group in the preceding example rather than having to repeat the font selection property six times (and then change it six times if the style changes).

  • + Share This
  • 🔖 Save To Your Account