Cascading Style Sheets/Selectors

In CSS, a selector is the part of a rule that comes before the first "{", such as "p" in the rule " ". A selector specifies to which elements a rule should apply, by naming the type of the element, such as "div", the class of the element, or the id of the element. Selectors can only be used in linked and embedded CSS, not in inlined one.

The following table provides an overview of selectors. The sections that follow discuss each type of selector in detail.

Type
These selectors match elements based on the name of their element type. The example above is using a type selector to make every instance of  have bold text. You can use the type selector with any element. Here are a few examples:

Class
The class selector works with (X)HTML documents. It does not work with general XML documents unless the User Agent (web browser or other document reader) can determine which attribute is the class attribute for elements in the document. In (X)HTML documents  is defined to be the class attribute.

HTML permits the  attribute for all elements that are valid in the body section of an HTML document, including the   element itself. This allows the web designer to distinguish between elements of the same type used in different contexts. For example, the designer could differentiate between HTML elements and HTML attributes in a technical document on HTML. attribute of the The class selector allows you to apply CSS rules based on the class of an element.

The first way is to make a global class, which can be added to any element. You do that like this: That will make any element that has the class of important be bold and red.

Sample HTML: Example rendering:

The second way is to attach it to a type selector. The rule is only applied to elements of the given type which are of the specified class.

CSS rule:

Sample HTML:

Example rendering (look right):

An element may belong to more than one class, e.g.

Example rendering:

Class names should describe the purpose of the class, e.g. important, not the effect of the class, e.g. red. If you name classes by effect and then change your mind about the appearance you want you can end up with rules like:

If necessary multiple class selectors can be used to select only elements that belong to all the specified classes, e.g.

Example rendering:

Internet Explorer 6 bug
Multiple class selectors as shown in the previous example do not work in Internet Explorer version 6. It treats the selector as though only the last class selector was present, e.g.  is treated as equivalent to.

Previous example rendered in Internet Explorer 6:

The complete HTML document and CSS stylesheet to test this bug are given below.

classBug.css:

classBug.htm:

ID
The ID selector works with (X)HTML documents. It does not work with general XML documents unless the User Agent (web browser or other document reader) can determine which attribute is the ID attribute for elements in the document. In (X)HTML documents  is defined to be the ID attribute.

The ID selector is used to select a single item on a page. It matches the  attribute of an element. Two elements on the same page must not have the same  attribute.

However, several different webpages within the same site might reuse an. It is commonly used for the major divisions of a page, e.g. mainContent, navigationBar. It is often used in conjunction with descendant selectors, e.g. to style all list items in the navigation bar whilst not affecting lists in the main content.

CSS rule:

Sample HTML: Example rendering:

Universal
These selectors apply a style to all the items on the page. For example to make all the text on the page green use the rule:

Pseudo-Classes
Pseudo-classes and pseudo-elements allow elements to be formatted on the basis of information other than the position of the element in the document tree. Pseudo-class and pseudo-element selectors are prefixed by a colon,, in CSS1 and CSS2.1. In CSS3 pseudo-elements are prefixed by.

CSS level 1 defines three pseudo-classes: These can only be applied to the anchor elements.
 * : unvisited links
 * : visited links
 * : active links

CSS level 2.1 introduces several additional pseudo-classes, including. can be used to create rollover effects without resorting to Javascript. CSS2.1 also allows  to apply to any element that can be active, e.g. a button.

The additional CSS 2.1 pseudo-classes are:
 * : matches any element that is the first child of its parent.
 * : matches the language of the element. The language may be set directly on the element or inherited from an ancestor element. A valid language code must appear in the parentheses, e.g.  for any variant of English or   for British English.
 * : applies whilst the user hovers over the element with the mouse.
 * : now allowed on any element capable of being 'active' &#8211; applies whilst the element is active.
 * : applies whilst the element has the keyboard focus.

Although CSS2.1 allows  on any element Internet Explorer only allows it on anchor elements.

Examples: An example of the  pseudo-class is given at the end of the descendant selector section.

Multiple pseudo-classes may be specified, e.g. to warn the user that they are hovering over a link they have already visited:

Care should be taken over the order of rules using pseudo-classes. For example, if you want visited links to be green except whilst the user hovers over them, when they should be yellow, the rules must be in the following order:

If the rules were reversed the cascade would mean that the visited color would take precedence over the hover color. Visited links would remain green even when the user hovered over them.

Pseudo-Elements
Pseudo-classes and pseudo-elements allow elements to be formatted on the basis of information other than the position of the element in the document tree. Pseudo-class and pseudo-element selectors are prefixed by a colon,, in CSS1 and CSS2.1. In CSS3 pseudo-elements are prefixed by.

CSS level 1 defines two pseudo-elements,  and , which select the first letter and line of the rendered element respectively. These can be used to apply typographic effects, e.g. to create a drop cap at the start of a paragraph.

Only one pseudo-element selector may be used and it must be the last part of the selector chain. The  selector may only be applied to block-level elements, inline-blocks, table captions and table cells.

CSS2.1 adds two more pseudo-elements,  and.

Starting in CSS3 pseudo-elements are prefixed with  rather than.

Simple selectors
The selectors described above (type, class, ID, universal, pseudo-class and pseudo-element) are all examples of simple selectors. The full syntax for a simple selector is:
 * a type selector or the universal selector
 * zero, one or more class, ID and pseudo-class selectors (CSS2.1 also allows attribute selectors)
 * zero or one pseudo-element selectors

The following are all examples of simple selectors:

As a shorthand notation the universal selector,, may be omitted if it is not the only component of the simple selector. For example,  is equivalent to   and   is equivalent to.

Combining simple selectors: Simple selectors can be combined to take the context of the element in to account. For example you might want to apply a rule only to list elements in the navigation bar.

Descendant
Descendant selectors allow you to apply style to elements that are nested within another specified element. For example, you could have every  element inside of every   element be bold. The  can be a child element of the   element, or a grandchild, or a great-grandchild, etc.

CSS rule:

Sample HTML:

Example rendering:

The next example changes the color of visited links in the navigation section. Visited links in other parts of the document would be unaffected.

CSS rule:

Sample HTML:

Example rendering:

An example using the  selector.

CSS rule:

Sample HTML:

Example rendering:

Two important points to note:
 * an element is still the first child if it is preceded by text, so the  element in the first paragraph and the   element in the second paragraph are the first children of their respective paragraphs.
 * a rule is only applied to an element if it matches all parts of the selector. The  element in the first paragraph is a second child, so it is not matched by the   selector.

Grouping selectors
Selectors can be grouped into comma separated lists. is equivalent to

An element may be selected by more than one rule: All headings will have a red background. Level 2&#8211;6 headings will have white text. Level 1 headings will have yellow text.

The order of the rules is significant. In the following example all headings would have white text. When more than one rule applies to an element the cascade is used to determine the resulting style applied to the element.

Later CSS versions
Additional selectors in CSS 2.1:
 * Child selectors
 * Adjacent sibling selectors
 * Attribute selectors
 * More pseudo-classes and pseudo-elements.

Additional selectors in CSS 3:
 * More sibling selectors
 * More attribute selectors
 * More pseudo-classes and pseudo-elements.

Le langage CSS/Les sélecteurs CSS/Selettori