Every CSS rule has two basic parts: a selector and a declaration block. The declaration block lists the formatting instructions like font size, line height, borders, and so on. However, the fundamental part of CSS rule is the selector – after all it tells a web browser to which element or elements on a page these formatting instructions should be applied. Although the original CSS1 specification had only 5 or 6, CSS2 and CSS3 introduced a variety of new selectors enabling complex styling of webpages using simpler CSS and less script. So let’s explore available CSS selectors starting with the most common and simplest and moving onto the more advanced ones.

Universal Selector

The universal selector, denoted by an asterisk, matches any element type in the document. For example, the following rule will reset the default browser padding and margin on every element:

* { margin: 0; padding: 0; }

Universal selector can be used not only as a stand alone selector but as part of a descendent selector as well. So you can apply a style to all of the tags that descend from a particular element. For example, consider the following HTML fragment:

<article>
  <header>
    <h1>Article Title</h1>
    <p>By Author</p>
  </header>
  <p>Some text...</p>
</article>

To draw a thin gray border around every element inside article tag you could use the following rule:

article * { border: 1px solid #555; }

Despite the power and flexibility of the universal selector developers are discouraged from using it as it’s the most expensive CSS selector in terms of webpage performance.

Compatibility: IE 7+, Firefox, Chrome, Safari, Opera.

Type Selectors

If you’ve written even a single rule in a style sheet, you’ve used a type selector. It selects all elements of the specified element type. For example, ul, p and a are all element selectors and the following CSS rules will be applied respectively to all ul, p and a elements within the page:

ul { list-style-type: circle; margin-bottom: 18px; }
p { margin-bottom: 18px; }
a { color: #369; text-decoration: none; }

Compatibility: IE 6+, Firefox, Chrome, Safari, Opera.

Class Selector

CSS class selector matches elements based on the contents of their class attribute. Consider the following HTML fragment:

<article>
  <header>
    <h1>Article Title</h1>
    <p class="byline">By John Doe</p>
  </header>
  <p>Some text...</p>
</article>

Say you want to format the p element containing author information but you don’t want all p elements affected. In this case you can use a class selector:

.byline { color: #999; font-size: 11px; }

This selector is equivalent to *.byline and matches all elements with a class attribute that contains the value “byline”. However, you can create dependent classes which tie the declaration of the class to a particular element by placing a type selector in front of the class. For example, the following CSS rule will be applied only to p elements with a class attribute that contains the value “byline”:

p.byline { color: #999; font-size: 11px; }

You can assign multiple classes to a single element by adding additional class names in a space-separated list. Class selectors can then be used to target only elements which have several class names. For example, the following style rule matches any p element if its class attribute has a space-separated list of values that include both the “byline” and “johndoe” class names:

p.byline.johndoe { color: #369; }

Compatibility: IE 6+, Firefox, Chrome, Safari, Opera. (Prior to IE 7 multiple classes are not supported.)

ID Selector

ID selector matches an element based on the contents of that element’s ID attribute. Unlike classes, an ID can only be used once per page, and is a unique identifier to an element. Therefore IDs should be reserved for unique, single-use elements. Here is a simple example:

<div id="page-wrap">
  ...
</div>

And the ID selector for this element:

#page-wrap { width: 960px; margin: 0 auto; }

As with classes you can also create dependent ids, which use the declarations of the id only when applied to a particular element. However, it’s rarely necessary because the point of id is that you use it only once per page.

Compatibility: IE 6+, Firefox, Chrome, Safari, Opera.

Attribute selectors

As you may expect from the name, an attribute selector allows you to style an element based on the existence of an attribute or the attribute’s value. Four attribute selectors were introduced in CSS2, and CSS3 added three additional attribute selectors for matching substrings in the value of an attribute.

[attr] – attribute existence

This type of attribute selector matches elements with the specified attribute, regardless of the attribute’s value. The example below selects html5 input elements that have the required attribute:

input[required] { border: 1px solid #f00; }

Compatibility: IE 7+, Firefox, Chrome, Safari, Opera.

[attr="value"] – exact value

You can select elements that not only share a particular attribute but also have an exact value set for that attribute. For example:

input[type="text"] { padding: 3px; }

This selector matches any input element that has a type attribute with a value equal to text.

Compatibility: IE 7+, Firefox, Chrome, Safari, Opera.

[attr~="value"] – spaced list

The ~= operator allows you to target an element if it has the specified attribute that contains a list of space-separated words, one of which is the specified value. Let’s make things clearer. Say you want to give a border to images with alt text “Figure 1″, “Figure 2″ and “Figure 3″. You can select all these images with the following selector:

img[alt~="Figure"] { border: 1px double #999; }

Compatibility: IE 7+, Firefox, Chrome, Safari, Opera.

[attr|="value"] – hyphenated list

This attribute selector matches elements with the specified attribute that contains a list of hyphen-separated words, one of which is the specified value. Generally used for language subcode matches:

p[lang|="en"] { color: #f00; }

This matches all p elements with lang attribute en, en-gb, en-us.

Compatibility: IE 7+, Firefox, Chrome, Safari, Opera.

[attr^="value"] – begins with

Added in CSS3 this attribute selector lets you select elements with an attribute value that begins with the specified value. Suppose you want to style all external links differently. Assuming you don’t use absolute links for internal links and any external link begins with http:// you can create the following attribute selector:

a[href^="http://"] { color: #f00; }

Compatibility: IE 7+, Firefox, Chrome, Safari, Opera.

[attr$="value"] – ends with

This one matches elements with an attribute value that ends with the specified value. Also added in CSS3. For example, say you want to style all links that point to a ZIP archive file differently. To target them you can simply use:

a[href$=".zip"] { color: #00f; }

Compatibility: IE 7+, Firefox, Chrome, Safari, Opera.

[attr*="value"] – contains

And finally, the last attribute selector. Also added in CSS3. It matches elements that have an attribute which contains the specified value anywhere within it. This example will match img elements with an src attribute that contains the string "thumb":

img[src*="thumb"] { border: 1px solid #333; }

So, images named “sunset_thumb.jpg” or “sunrise_thumb.jpg” will be styled.

Compatibility: IE 7+, Firefox, Chrome, Safari, Opera.

CSS doesn’t limit attribute selectors to tag names – you can combine them with classes, too. For example, .thumbnail[title] selects every element with the thumbnail class and title attribute.

Multiple attribute selectors can also be used to represent several attributes of an element. For example, input[type="email"][required] selects every input element that has type attribute equal to email and a required attribute regardless of its value.

To be Continued…

This is the end of Part 1. In the second and final part I will cover combinators, pseudo-classes and pseudo-elements.