CSS fundamentals: Selectors

In CSS, Selectors are used to select HTML elements for styling. There are many different ways to select elements. This article will cover the most basic types of selectors: element selectors, classes, and ID's as well as the concepts of grouping and descendent selectors.

Contents of this article

  1. Element type selectors
  2. Class selectors (generic identifiers)
  3. Unique identifiers
  4. Grouping
  5. Descendent selectors

Keep in mind that:

  • all selectors are case-sensitive (meaning that it matters whether you use upper-case or lower-case characters; it is usually good form to stick to lower-case characters)
  • selectors may only include alpha-numeric characters (a-z and 0-9), underscores (_), hyphens (-)
  • selectors may not start with a digit (0-9)
  • if a selector is incorrectly formed, the browser will ignore the selector and the following rule set

Element type selectors

To select elements using element names, simply use the HTML tag name (p, a, div, strong etc.) as the selector. For example:

p {
  margin-bottom: 10px;
}

AnchorClass selectors

A class is a generic selector which allows you to select generic HTML elements. A class should be used when there may be more than one of a particular selector on a page. To use this method, apply the class to your HTML tag using the class attribute:

<p class="fineprint">
  This is some extra information or details.
</p>

To select this element in your CSS, use a period followed by the class name:

.fineprint {
 font-size: .9em;
 font-style: italic;
}

If you want to be more specific, you can combine a class selector with an element type. The following code will select all the paragraphs with the fineprint class:

p.fineprint {
 font-size: .9em;
 font-style: italic;
}

Notice that there is no space in between the p and the .fineprint in this example.

Unique identifiers

A unique identifier, or id, allows you select specific HTML elements. An id should be used when there is only one of a certain element on a page (e.g. a header or footer). To use this method, apply the unique identifier to your HTML tag using the id attribute:

<div id="header">
  ... header goes here ...
</div>

To select this element in your CSS, use the id name preceded by a hatch-mark (#):

#header {
  width: 940px;
  padding: 10px;
}

Grouping

If more than one HTML element shares the same CSS properties, you can group them together in a comma-separated list. For example, if you wanted h1 and h2's to share the same font properties, you could specify them separately, like this:

h1 {font-family: Georgia; font-size: 16px}
h2 {font-family: Georgia; font-size: 16px}

or you could combine them together:

h1, h2 {font-family: Georgia; font-size: 16px}

Descendant selectors

You can also combine selectors together, which allows you to choose more specific elements. Descendant selectors are used to target elements that are contained within other elements in an HTML document. For example, if you had a content div with some paragraphs inside, like this:

<div id="content">
  <p>This is the content.</p>
  <p>This is another paragraph.</p>
</div>

Here, the paragraphs is contained within the #content div. In CSS terms, that means it is a ‘descendant’ of the #content div (just as you are a descendant of your parents; the concept of relationships between HTML elements, or the document tree’ will be more fully explained in a future article in this series). To use a descendent selector, simply put the two selectors together with a space in between. The following code will select all the p tags within the #content div:

#content p {
  margin-bottom: 10px;
}

This code will select all the paragraphs with the .fineprint class inside the #content div:

#content p.fineprint {
 font-size: .9em;
 font-style: italic;
}

Advanced selectors

There are some more advanced ways to select elements using CSS. A future article in this series will outline some of the more advanced ways to select HTML elements. In the meantime, try 456 Berea Street's three-part series on CSS selectors:

Discussion

To discuss this article or ask questions, please visit the forum discussion on CSS fundamentals: Selectors.

Resources

Megan McDermott's picture

About the Author

Megan is co-founder and editor of A Padded Cell and administrator at The Webmaster Forums. She has been designing websites since 1997, with expertise in design, information architecture, usability, HTML/CSS, Drupal theming, and more. She is available for short-term or ongoing freelance work in any of those areas. Read her web design blog at MeganMcDermott.com or check out her portfolio.