13. Styling element attributes
Prev | Chapter 4. Other extensions | Next

## 13. Styling element attributes

An attribute can be rendered in the document view by inserting a value editor in the generated content.

XHTML example: a pair of radio buttons are used to set the `dir` attribute of a `p` of class `bidi`.

    p.bidi:after {
        display: block;
        content: "Direction: "
                 radio-buttons(attribute, dir,
                               labels, "Left to right\A Right to left",
                               values, "ltr\A rtl");
        font-size: smaller;
    }

This way of rendering attributes is fine but is too tedious to specify to be used on a large scale, for example to style XML data where most elements are empty but have several attributes.

In such case, it is recommended to use CSS rules where the selector contain the `:attribute`() non-standard pseudo-element.

The `:attribute()` pseudo-element has a attribute name parameter. This attribute name may be specified as a CSS identifier (specifies a name having no namespace, example: `dir`), a CSS string (also specifies a name having no namespace, example: `"dir"`) or a CSS qualified name (example: `xlink|href`). Note that name wildcards (examples: `xlink|*`, `*|href`) are not supported here.

Same example as above but using this type of rule:

    p.bidi2:after {
        display: block;
        content: attributes();
    }

    p.bidi2::attribute(dir) {
        attribute-content-left: "Direction:";
        attribute-content-middle: radio-buttons(attribute, dir,
                                                labels,
                                                "Left to right\A Right to left",
                                                values, "ltr\A rtl");
        show-attribute: always;
        font-size: smaller;
    }

| First rule inserts an `attributes()` container after each `p` of class `bidi2`. A `attributes()` container is similar to a table with a row for each attribute. This table has 3 columns: left, middle, right. No border is drawn around its cells. The content of an `attributes()` container is specified using CSS rules where the selector contain the `:attribute`() non-standard pseudo-element.
| Second rule specifies that attribute `dir` must always be displayed for each `p` of class `bidi2`, whether this attribute is set or not. `attribute-content-left` specifies the content of left column in the `attributes()` container. `attribute-content-middle` specifies the content of middle column in the `attributes()` container. `attribute-content-right` specifies the content of right column in the `attributes()` container.

Table 4.2. Properties used to specify generated content for attributes

Property | Value | Initial value | Description
--- | --- | --- | ---
attribute-content-left | Any value allowed for the content: property plus `attribute-*()` pseudo functions (see below). | "" (no content) | Generated content for the attribute which is the target of the `:attribute()` rule that goes to the left column of the `attributes()` container.
attribute-content-middle | Any value allowed for the content: property plus `attribute-*()` pseudo functions (see below). | "" (no content) | Generated content for the attribute which is the target of the `:attribute()` rule that goes to the middle column of the `attributes()` container.
attribute-content-right | Any value allowed for the content: property plus `attribute-*()` pseudo functions (see below). | "" (no content) | Generated content for the attribute which is the target of the `:attribute()` rule that goes to the right column of the `attributes()` container.
show-attribute | never | always | when-added | when-added | never Never display this attribute in the `attributes()` container. always Always display this attribute in the `attributes()` container even if the attribute has not yet been added to the element. when-added Display this attribute in the `attributes()` container if the attribute has been added to the element.

Same example as above with all attributes a `p` of class `bidi2`, displayed when they are added to this element, except for the `dir` attribute which is always displayed:

    p.bidi2:after {
        display: block;
        content: attributes();
    }

    p.bidi2::attribute() {
        attribute-content-left: attribute-label() ":";
        attribute-content-middle: value-editor(attribute, attribute());
        attribute-content-right: remove-attribute-button(attribute, attribute());
        show-attribute: when-added;
        font-size: smaller;
    }

    p.bidi2::attribute(dir) {
        attribute-content-left: "Direction:";
        attribute-content-middle: radio-buttons(attribute, dir,
                                                labels,
                                                "Left to right\A Right to left",
                                                values, "ltr\A rtl");
        show-attribute: always;
    }

### Note

Notice that in the above figure, the values of the `dir` attribute are displayed in green. This is because, unlike in first example, this `p` of class `bidi2` has no `dir` attribute yet.

By default (this can be specified):

- A green foreground color means that attribute is not set.

- A red foreground color means that attribute value is invalid or that the value editor is not well suited to display this kind of values.

| This rule specifies the generated content for all attributes of a `p` of class `bidi2`.
| `attribute-label()` is only supported in the `attribute-content-left`, `attribute-content-middle`, `attribute-content-right` properties. Similar generated content is:
Pseudo-function | Description | Example
--- | --- | ---
attribute-name() | The fully qualified name of the attribute. | ns:myAttribute-1
attribute-local-name() | Local part of attribute name. | myAttribute-1
attribute-namespace-uri() | Namespace URI of attribute name. | http://acme.com/ns/foo/bar
attribute-label() | Local part of attribute name, made more readable. | My attribute 1
| `value-editor()` will automatically find a suitable value editor based on the data type of attribute which is the target of the rule.
| `value-editor()` like all other value editors (such as `radio-buttons()`) can also be used to edit the value of an element. "`attribute, attribute()`" specifies that the value editor to be inserted in generated content will be used to edit the attribute which is the target of the rule.
| See `remove-attribute-button()`.
| This rule specializes the previous rule for the `dir` attribute. The `attribute-content-right` property not specified in this rule is inherited from the more general `:attribute()` rule.

Prev | Up | Next
12. Styling comments and processing instructions | Home | 14. :property() extension pseudo class