CSS3 selectors simplified, Part 1: Simple selectors and attribute selectors

CSS 3 has introduced a variety of new selectors that can be used to access elements in a web page. While some of these were available in CSS 2.1, the range of new options can be confusing. How can you make sense of it all? Read on!

This series will break down the nine types of selectors available in CSS 3. It will explain how and when to use these selectors and provide examples. A separate page is also available with working examples. Let's get started!

The format of this article

This article is broken down into sections for each type of selector. Each selector will have a link to the specification, an example and a support rating. Links to the specification will point to the current proposed recommendation (dated 15 December, 2009). Examples will link to working test pages when an element's usage might be particularly confusing. The "support" rating will use keywords to describe the level of support for each selector, and link to more information if available. Levels of support are:

  • universal - all browsers support this selector and it can be used in production with no worries
  • excellent - the latest versions of all browsers support this and it can probably be used in production (this probably means that IE 6 doesn't support it but all other browsers do).
  • good - many browsers support this or partially support it (usually Internet Explorer 7 & 8 lag behind); it can be used for progressive enhancement or in cases where support for older browsers isn't needed. Check compatibility tables for details.
  • partial/limited - some browsers are starting to support this but support may be variable or inconsistent; might be usable for progressive enhancement and experimental designs.

These ratings are made in the context of desktop browsers currently in widespread use (IE 7 and higher, Firefox 3.5 and higher, Safari 3.2 and higher, Chrome 9.0 and higher, Opera 10.5 and higher).

When can I use is a good site for checking browser support for various CSS and HTML elements. Quirksmode.org also has detailed support tables, as does Standardista.com. When can I use... also includes information on support in mobile browsers (iOS, Opera, Android).

Simple selectors

These are basic selectors that have been available in most versions of CSS. They are defined in the CSS 3 specification, so we'll review them here before moving on to the more complex selectors new to CSS 3.

  1. Type selector

    This is the simple element selector that has been available in all versions of CSS. To use it, you simply use the element name, as it would appear in HTML (without the <>).

    W3C specification: Type selector

    Support: universal

    Example: To select all <h1> elements on a page:

    h1 {font-size: 1.6em;}

  2. Universal selector

    The universal selector can be used to select all elements within a certain container.

    W3C specification: Universal selector

    Support: universal

    Example: select all elements in a document:

    * {font-family: Helvetica, Arial, sans-serif;}

    Example: select all elements within a div:

    div#container * {margin-left: 10px;}

    Support: universal

  3. Class selectors

    If you've done any work with CSS you probably know the class selector. This allows you to select multiple elements on a page with a label defined using the "class" attribute.

    W3C specification: Class selector

    Support: universal

    Example: Select all elements with the class="more" attribute:

    .more {text-align: right;}

    You can also combine two class selectors together. If an element has two classes (separated by a space), you can access them both at the same time:

    Example: Select all element with both the more and the

  4. ID selectors

    The ID selector is similar to the class selector, except that the id selector is used to select a single, unique element on a page identified the "id" attribute.

    W3C specification: ID Selector

    Support: universal

    Example: Select the element with the id="container" attribute:

    #container {width: 960px;}

    Example: Select the div element with the id="container" attribute:

    div#container {width: 960px;}

Attribute Selectors

Attribute selectors allow you to select elements based on the attributes they contain as well as the values of those attributes. Accessibility standards such as WAI-ARIA are starting to make semantic attributes more common. These methods add another layer of semantics onto the HTML mark-up and can also be used to access those elements semantically in CSS.

  1. [attr] — attribute presence

    This selector matches any element that contains a particular attribute, regardless of its value.

    W3C specification: Attribute presence and value selectors

    Support: excellent

    Example: Select all links that contain the rel attribute:

    a[rel] {background-color: #ccc;}

  2. [attr=val] – attribute value matches val

    This selector matches the value of an attribute exactly (attr="val" and only "val")

    W3C specification: Attribute presence and value selectors

    Support: excellent

    Example: Select all text input form elements:

    input[type=text] {background: #eee;}

    Example: Find all link elements with the rel="external" attribute, and add an identifying background image:

    a[rel=external] {
      background: url(images/external.png) right center no-repeat;
      padding-right: 15px;
    }

    This is a good way to mark external links with CSS, as long as you remember to include the rel=external attribute. See the "starts with" substring selector below for another example.

  3. [attr~=val] – attribute value includes val

    This selector matches any element with an attribute (attr) that contains a list of multiple values, one of which is val. Confused yet? Remember that attributes can contain multiple values in a space separated list (e.g. class="image image-right"). This selector accounts for this and allows you to state that one of the values is val.

    W3C specification: Attribute presence and value selectors

    Support: excellent

    Example: In the previous section we added an identifying image to link elements with the rel="external" attribute. But what if the rel attribute contained more than one value? In that case, we could do this:

    a[rel~=external] {
      background: url('images/external.png') right center no-repeat;
      padding-right: 15px;
    }
  4. [attr|=val] – attribute value matches or starts with val

    This selector is a bit more obscure than the others. It is intended to be used for attributes that specify a language. For example, variations of English might be specified as en-US or en-GB or just en. The [attr|=val] selector would allow you to select any of those options, as long as they start with en.

    W3C specification: Attribute presence and value selectors

    Support: excellent

    Example: select links with the lang attribute starting with fr, and add an icon. This would be useful if you link to pages in another language, and want to let your visitors know what to expect.

    a[lang|=fr] {
      background: url('images/french.gif') right center no-repeat;
      padding-right: 25px;
    }
  5. [att^=val] – attribute value starts with val

    This is the first of three substring matching attribute selectors. These allow you to select part of an attribute value. The [att^=val] states that the value must start with the value specified.

    W3C specification: Substring matching attribute selectors

    Support: good

    Example: Continuing with identifying certain links with icons, here we can add an icon to any links that point to secure pages:

    a[href^=https] {
     background: url('images/secure.gif') right center no-repeat;
     padding-right: 18px;
    }
  6. [att$=val] – attribute value ends with val

    This selector states that the value must end with the value specified.

    W3C specification: Substring matching attribute selectors

    Support: good

    Example: Add an icon to all links to PDF files:

    a[href$=pdf] {
     background: url('images/pdf.png') right center no-repeat;
     padding-right: 20px;
    }
  7. [att*=val] – attribute value contains val

    This selector states that the attribute value must contain the value specified. This can be anywhere in the attribute value – at the start, at the end, or in the middle.

    W3C specification: Substring matching attribute selectors

    Support: good

    Example: Imagine you link to a particular site often. Here at A Padded Cell, we have a lot of articles and tutorials on Drupal. Let's imagine we want to add an icon to any links that point to Drupal.org (including groups.drupal.org, api.drupal.org etc.):

    a[href*="drupal.org"] {
     background: url('images/drupal.png') right center no-repeat;
     padding-right: 20px;
    }

    Note that in this example the string we want to match is enclosed in quotes. The quotes are normally optional, but were needed here since there was non-alphabetic character in the string. If you're having trouble getting your code to work, and the text you are trying to match includes non-alphabetic characters, try adding the quotes.

Discussion

To discuss this article or ask questions see The Webmaster Forums discussion on CSS 3 selectors simplified, Part 1: Simple selectors and attribute selectors.

Further reading

Future articles in this series will cover psuedo-classes pseudo-elements and combinators. Watch for Part II in late-August.

References

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. Megan is also a partner and co-founder of Woolwich Web Works: A small team that can do big things!