Next / Previous / Contents / TCC Help System / NM Tech homepage

7. Selectors

The selector part of a CSS rule can take several forms.

7.1. Element type selectors

To make a rule apply to all occurrences of a given HTML element, use the element (tag) name as a selector. For example, to indent every HTML <p>…</p> (paragraph) element half an inch:

  p { text-indent: 0.5in; }

You can also make the rule apply to multiple element types by giving a list of tag names separated by commas, for example:

  h1, h2, h3 { color: red; }

This rule would render all three heading levels as red: h1, h2, and h3.

7.2. Selecting elements by class

You can make a rule apply only to certain occurrences of an element. To do this:

  1. Invent a class name (using letters, digits, and hyphens).

  2. Add an attribute class='C' to the elements you want to affect, where C is the class name you have invented. Any HTML start tag can contain a class='C' attribute.

  3. Then, in your style sheet, use a selector of this form:

      element.C
    

For example, suppose you want to designate certain paragraphs as “key paragraphs.” You might tag all those paragraphs using:

<p class='key'> … </p>

If you want key paragraphs set in purple type, add this rule:

  p.key { color: purple; }

You can use the HTML div and span elements to attach class names to sections of your documents. These tags don't affect the HTML; they exist only as places to attach class names. Use div for block-level elements, meaning that this element always starts a new line on the page and ends with a new line. Use the span element to mark part of a line or paragraph.

7.3. Selecting elements by their context

Sometimes you want to apply a style rule to a particular element only in certain contexts.

To do this, use a selector of the form

e1 e2

where e1 is the containing element and e2 is the contained element. The associated rule then applies only to cases where element e1 is an ancestor of e2—that is, either e2 is a child of e1, or a child of a child, et cetera.

For example, to use maroon letters for emphasized text (the em tag) anywhere within a level 1 heading (the h1 tag), you would use a CSS rule like this:

  h1 em { color: maroon; }

You can stack any number of element names in a rule like this. For example, the selector “ul ul ul” would apply to third-level bullet lists (that is, bullet lists within bullet lists within bullet lists).

7.4. Child selection

Another way to select elements by context is to specify that a certain element must be an immediate child of some parent element. Use a selector of this form:

  e1 > e2

where e1 and e2 are element names. In this form, the rule applies only to e2 elements that are the direct children of e1 elements.

For example, the selector “h1 > em” would apply to an em element whose parent element is h1, but it would not apply to an em element inside a citetitle element inside an h1 element.

7.5. Adjacent element selection

You can also write a selector that applies to an element only when it is preceded by a certain other type of element.

The general form is

e1 + e2

where e1 and e2 are element names. In this form, the rule applies only to any e2 elements that immediately follows an e1 element.

For example, the selector “div.q+div.a” would apply to any <div class="a">…</div> element that immediately follows a <div class="q">…</div> element.

7.6. Selecting by attribute values

You can write rules that apply only to elements with certain attributes. There are several forms of this rule.

[att]

Applies only to elements that have an attribute named att.

For example, the selector

h2[rating]

would apply only to h2 elements that have a rating attribute.

[att=value]

Applies only to elements that have an attribute named att whose value is value.

For example, this selector

p[role="panic"]

would apply only to paragraphs starting with a tag like “<p role="panic">”.

[att~=value]

Applies to elements that have an attribute named att whose value is a space-separated list of values including the given value.

For example, a paragraph that started with tag <p phobias='acro claustro arachno agora'> would be affected by a selector “p[phobias~="arachno"]”.

[att|=value]

Applies to elements that have an attribute att whose value starts with value, optionally followed by a hyphen and other characters.

This particular selector was intended for style markup that applies only to specific languages. For example, this rule

*[lang|="en"]

would apply to any element that has a lang attribute that starts with "en". Thus it would apply to the various English variants such as lang="en-us" (U. S. English), lang="en-uk" (British English), and so forth.

7.7. Selecting specific single elements by ID

You can also make a rule apply to one specific element. Tag the element with an attribute id='I' where I is some unique identifier made of letters, digits, and hyphens. As with the class='…' attribute, any HTML element can have an id='…' attribute. Then use a stylesheet rule of the form:

  element#I

where I is the identifier.

7.8. Pseudo-classes

You can use a pseudo-class in a selector. Unlike the selectors we've already discussed, pseudo-classes are used to select parts of the content by their state or position or other qualities that are not related to what elements or tags they are part of.

Pseudo-class names are always preceded by a colon (:). Pseudo-classes include:

:active

Affects an element during the time the user is clicking on it.

:focus

Affects the element that has focus, that is, the element that would currently receive any keyboard input.

:hover

Affects the appearance of an element while the mouse is on top of it, but not clicked.

:lang(code)

Affects only elements with a language that matches the given code. For example, this rule would display any French elements in blue:

*:lang(fr) { color: blue; }

:link

Affects the appearance of links that have not been visited. For example, this rule would make unvisited links appear in purple:

a:link { color: purple; }
:visited

Affects the appearance of links that have been visited.

7.9. Pseudo-elements

A pseudo-element is a selector that refers to a specific area of the page. There are two types of pseudo-elements:

  • The :first-letter and :first-line pseudo-elements refer to specific parts of a paragraph. There is no other way to refer to the first line of a paragraph, since we only know what is in that line when the page is actually rendered.

  • The :before and :after pseudo-elements allow you to add content before and after some other element.

Here are the pseudo-elements in CSS2.

:after

Displays specific content after an element. Use the content property of the rule to specify what text is displayed after an element.

For example, this rule would display two closing square brackets after any level-2 heading:

h2:after { content: "]]" }

:before

Like :after, but this selector displays specific content before an element. Use the content property of the rule to specify what text is displayed after an element.

For example, this rule would display two opening square brackets before any level-2 heading:

h2:before { content: "[[" }

One common use of this selector is to insert generated content, such as section numbers. See Section 16, “The content property: Specifying content in pseudo-elements”.

:first-letter

Affects the appearance of the first letter of an element. For example, this rule:

p:first-letter { font-size: large }

would display the first letter of each paragraph in a large size. In combination with other properties, you can use this pseudo-class to get a “drop cap” effect (starting a paragraph with one large letter).

:first-line

Affects the appearance of the first line of a block element (such as a text paragraph). For example, this rule

 p:first-line { text-transform: capitalize}

would display the first line of every paragraph all in capital letters.

7.10. The universal selector

The selector “*” applies to all elements. For example, to make text green everywhere:

  * { color: green; }

This selector is the least specific selector, so any more specific selector will override it. See Section 8.2, “Specificity: Which selector applies?”.