XHTML Mobile Profile and CSS Reference: Selectors

Selectors

You use Cascading Style Sheets (CSS) selectors to specify the elements to which the style rules apply. Selectors are used in external style sheets and in internal style sheets, included in the <style> element.

Grouping

If you are applying the same style rules to several elements, you can group the selectors to which one style declaration applies. You separate multiple selectors with commas.

In the following example, one rule sets the color for all heading elements.

h1, h2, h3, h4, h5, h6 {color: red}

Inheritance

Generally, elements nested within other elements inherit their style rules, unless those rules are explicitly modified. For example, text color specified for the <body> element is also applied to text in <p> elements in the <body> element.

There are some cases in which an element does not inherit the surrounding element's style rules, but these cases are fairly obvious. For example, the margin-top property is not inherited. A paragraph would not have the same top margin as the document body. Each entry in the reference to the CSS properties, in the second part of this chapter, indicates whether that property is inherited.

Inheritance is one of many elements in the CSS cascade. For details, see The Cascade.

Universal Selector

The universal selector specifies style rules for all elements in a document. This selector can be used with the other selectors such as descendant or child selectors.

NOTE Use of the universal selector can erode the performance of your applications. Be sure to test your applications' performance on real phones.

Pattern	Meaning
`*`	Matches all elements.

The following excerpt uses the universal selector to display the content of all elements in blue:

<head>
    <title>Universal Selector</title>
    <style type="text/css"
        * {color: blue}
    </style>
</head>

Type Selector

The type selector specifies style rules for all instances of a specific element in a document.

Pattern	Meaning
`E`	Matches any `E` element.

The following excerpt uses a type selector to display the content of all <h1> elements in blue:

<head>
    <title>Type Selector</title>
    <style type="text/css" >
        h1 {color: blue}
    </style>
</head>

Descendant Selectors

You can use descendant selectors to apply style rules to an element contained in a specified element. The style rules are applied no matter how deeply nested the second element is within the first, and forces the descendants to inherit the rule even for properties that are not inherited by default.

Pattern	Meaning
`E F`	Matches any `F` element that is a descendant of an `E` element. The universal selector can be used, for example, to select all descendants of an element. You can also concatenate more than one descendant (`E F G`, `E F G *`, and so on), for precise control of the selected elements.

The following excerpt uses a descendant selector to display in red the contents of all emphasized text in an ordered list:

<head>
    <title>Descendent Selector</title>
    <style type="text/css">
        ol em {color: red}
    </style>
</head>

In this example, the <ol> element can't contain an <em> element directly, so the <em> element will most likely be a grandchild or further descendant of any <ol> elements in the document.

Child Selectors

The child selector defines the style of an element that is a first-generation descendant of an element, that is, a child, but not a grandchild, great-grandchild, and so on.

Pattern	Meaning
`F>E`	Matches any `E` element that is a child of an `F` element. The universal selector can be used.
`G>F>E`	Matches any `E` element that is a child of an `F` element that is in turn a child of a `G` element.

The following excerpt uses a child selector to display in red any code in an ordered or unordered list:

<head>
    <title>Child Selector</title>
    <style type="text/css">
        li>code {color: red}
    </style>
</head>

Class Selectors

Class selectors apply to elements whose class attribute is set to a value listed in the style sheet. Class selectors can apply to specific elements or to all elements.

Pattern	Meaning
`.class_name`	Matches any element whose `class` attribute set to `class_name`.
`E.class_name`	Matches any `E` element whose `class` attribute is set to `class_name`.

The following code fragment creates two style rules using class selectors. The first displays in green the content of any element whose class="green". The second displays in red the content of any <p> element whose class="red".

<head>
    <title>Class Selector</title>
    <style type="text/css">
        .green {color: green}
        p.red {color: red}
    </style>
</head>
<body>
    <h1 class="green">Green Heading</h1>
    <p class="red">Red text.</p>
</body>

Link Pseudo-Class Selectors

You can use link "pseudo-class" selectors to create style rules that specify how links are displayed before and after the user has visited them.

Only the <a>, <blockquote>, and <q> elements can be links. The link pseudo-class selectors have no effect on elements that don't contain links.

Pattern	Meaning
`E:link`	Matches element `E` if the element is a link that has not been visited.
`E:visited`	Matches element `E` if the element is a link that has been visited.

The following code fragment uses link pseudo-class selectors to determine how links in an <a> element are displayed. Unvisited links are displayed in a larger font than surrounding content. Visited links are displayed in a smaller font than surrounding content:

<head>
    <title>Link Pseudo-Class Selectors</title>
    <style type="text/css">
        a:link {font-size: larger}
        a:visited {font-size: smaller}
    </style>
</head>

ID Selectors

You can use ID selectors to control the display of an element with a specific ID.

Each ID much be unique in an XHTML-MP document, so each rule that uses the ID selector affects only one instance of an element in each document. IDs must also follow the rules for XML IDs, as detailed in Common Attributes.

Pattern	Meaning
`#id_name`	Matches the element with an `id` attribute set to `id_name`.
`E#id_name`	Matches the `E` element with an `id` attribute set to `id_name`.

The following code fragment uses ID selectors to create style rules that display a first-level head (id="h1-01") in green and text (id="a0023") in red:

<head>
    <title>ID Selector</title>
    <style type="text/css">
        h1#h1-01 {color: green}
        #a0023 {color: red}
    </style>
</head>
<body>
    <h1 id="h1-01">Green Heading</h1>
    <p id="a0023">Red text.</p>
</body>