14. :property() and :read-only extension pseudo classes

Application properties are similar to element attributes except that:

An example of application property is LOCATION_INFO, the location of the file from which an element has been loaded.

Example of CSS rule using the :property() pseudo class:

*:property("LOCATION_INFO"):before {
    display: block;
    color: red;
    font-size: small;
    text-align: center;
    content: "LOCATION_INFO=" property("LOCATION_INFO") "\A" icon(down);
}

The above rule inserts above any element having a LOCATION_INFO property, a block displaying the value of this property.

Note that pseudo-function property(property_name) can be used to insert the value of the property in generated content.

Read-only is a property which differs from other application properties by that fact that it is represented very efficiently (other properties are similar to hash table entries).

Example of CSS rule using the :read-only pseudo class:

*:read-only {
    background-color: #F0F0F0;
}

The above rule is used to display any element marked as being read-only with a light-gray background.

PatternMeaning
E:read-onlyan E element, marked as being read-only
E:property("foo")an E element, having a property named "foo"
E:property("foo", "bar") or E:property("foo", equals, "bar")an E element, having a property named "foo" with a value whose string representation equals "bar"
E:property("foo", starts-with, "f")an E element, having a property named "foo" with a value whose string representation starts with string "f".
E:property("foo", ends-with, "oo")an E element, having a property named "foo" with a value whose string representation ends with string "oo".
E:property("foo", contains, "o")an E element, having a property named "foo" with a value whose string representation contains substring "o".