Style rules

Selectors

A selector refers to one or more XML elements in the content of your web pages. So you might have a rule for each level of heading, another for paragraphs, another for tables, and so on. You can use multiple selectors to apply a set of style properties to several elements. For example, you could assign the Arial font family to all your headings.

In addition you can create more specific selectors for classes of element, or elements with individual identifiers, using the class or id attributes on web pages. An example is giving a paragraph a 'note' class that adds a colored background and a border.

The CSS specification also provides for pseudo-elements and pseudo-classes like hyperlinks, with different states for 'hover' and 'visited', and you can specify these along with attribute selectors for the full range of XDIME attributes.

Namespaces in selectors

You can qualify a selector with an XML namespace. Let's suppose that in XDIME 2 you wanted to distinguish the label in the XForms namespace from the element with the same name in the default namespace. To do so you would add the xforms prefix (without the following colon) to the label element, resulting in a selector like this.

xforms|label {
  font-family: Helvetica;
}

This approach is not needed in XDIME since no namespace prefixes are used for presentation elements. In other words, a type selector p represents the p element from either XDIME 1, or XDIME 2. However, MCS defines two default namespaces:

If selectors need to be styled separately, then the appropriate prefix should be used, e.g. cdm|p to represent the selector in XDIME 1 and xhtml2|p to represent it in XDIME 2.

MCS behaves as the following hard coded mappings between namespace prefixes and namespace URIs were defined for every style sheet using @namespace rules. While possible, it is not recommended to map an existing hard coded prefix to a different URI, or a hard coded URI to a different prefix. Please note that the default mappings cannot be changed. Refer to the topic entitled At-rules for more information about the @namespace rule.

Using the universal selector

The universal selector, written as a CSS qualified name with an asterisk "*" as the local name, represents any single element in the document tree within the namespace(s) indicated by the prefix. If the selector is unqualified, then it behaves as if it was bound to the default namespace.

The following table provides several examples illustrating the use of the universal selector.

xhtml2|*

|*

*|*

*

Combining selectors

You can group simple selectors by adding or appending them to a group. When you append a selector, you can choose between child, descendant, direct adjacent sibling or indirect adjacent sibling.

p.note > a#myid {
  color: red;
}

table em {
  font-weight: bold;
}

h2 + p {
  margin-top: 6px;
}

h3.example ~ pre {
  font-size: 9pt;
}

Related topics

• Theme editor
• Adding a selector
• Setting style properties
• Style property categories
• Attribute selectors
• Pseudo-class selectors
• Pseudo-element selectors
• At-rules