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 {1
    display: block;
    content: attributes();
}

p.bidi2::attribute(dir) {2
    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;
}

1

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.

2

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

PropertyValueInitial valueDescription
attribute-content-leftAny 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-middleAny 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-rightAny 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-attributenever | always | when-addedwhen-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() {1
    attribute-content-left: attribute-label() ":";2
    attribute-content-middle: 3value-editor(attribute, attribute());4
    attribute-content-right: remove-attribute-button(attribute, attribute());5
    show-attribute: when-added;
    font-size: smaller;
}

p.bidi2::attribute(dir) {6
    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.

1

This rule specifies the generated content for all attributes of a p of class bidi2.

2

attribute-label() is only supported in the attribute-content-left, attribute-content-middle, attribute-content-right properties.

Similar generated content is:

Pseudo-functionDescriptionExample
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

3

value-editor() will automatically find a suitable value editor based on the data type of attribute which is the target of the rule.

4

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.

5

See remove-attribute-button().

6

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.