Using CSS Selectors

Note that Internet Explorer does not really support CSS Selectors. Firefox, Safari and Opera have much better support for these. They are CSS2 features. Internet Explorer version 7 is intended to have improved support, however. Note also that this upcoming improved support will break many CSS hack techniques for IE which work for previous versions of IE.

Universal Selector

This uses an asterisk to select all elements in the page.

* { text-transform: lowercase; } is used in this page.

Normal Selection

Normal CSS selection includes these types:

  1. identifier
  2. class
  3. element

Identifier selection is done by specifying an id attribute value, prefixed with a # symbol, such as
#zLevelOne { background-color: red; z-index: 1; }

Class selection is done by specifying a class attribute value, prefixed with a dot, such as
.stretch-words { word-spacing: 5mm; }

Element selection is done by specifying an element, with no prefix, such as
body { font-family: Arial, Helvetica, Verdana, sans-serif; }

These technique work properly in Internet Explorer.

Child Selector

You can target CSS styling by specifying elements which are direct children of other element types.

This is text inside a span, inside a paragraph, inside a div.

The style rule div > p > span { font-style: italic; } is applied here.

Adjacent Sibling Selector

You can also target styling to elements which are direct siblings of other elements.

For example, this is text inside an em, which is right next to a span in the source.

The style rule span + em { text-decoration: underline; } is applied here.

Notice that this rule also caught the emphasized "much" in the text at the top of the page, where the span and em are separated by other unmarked-up text.

Attribute Selector

You can target styling by limiting it to elements with certain attributes defined.

Here's a paragraph with a custom attribute called myAttribute. There is an in-page CSS style definition for it, as follows: p[myAttribute] { background-color: orange; }

Note that, at least in Firefox, you can even select based on the value of the attribute. For example, p[myAttribute="myValue"] works as expected. Further, using ~=, you can specify the existence of at least the given value, such as if you have a paragraph with mutliple classes declared, one of which is "targeted", you can use a selector like this p[class~=targeted]

Multiple Class Selection

Finally, you can also target styling to elements with a specific combination of classes.

This technique seems to work properly, at least for the most part, in Internet Explorer.

This paragraph has these three classes declared: "spinal tap rules"

The style rule p.spinal.tap.rules { text-tranform: uppercase; } is applied here.

Note that the order of the values is not important, and the target element can have more classes than are specified in the selector, as well.