OR statement within CSS selector

Question

One might use a CSS selector such as a[href^="http:"], a[href^="mailto:"] to match all external and mail links within a document, but is there a way to use an "or" statement within the quotes section of the selector like so: a[href^="(http|mailto):"]?

Answer 1

As far as I can tell, there's no way to do what you're asking. In the CSS selector spec, the pipe character is used for something different when used with attribute selectors. It's used as a namespace separator.

Per the selector spec on the W3C:

The attribute name in an attribute selector is given as a CSS qualified name: a namespace prefix that has been previously declared may be prepended to the attribute name separated by the namespace separator "vertical bar" (|). In keeping with the Namespaces in the XML recommendation, default namespaces do not apply to attributes, therefore attribute selectors without a namespace component apply only to attributes that have no namespace (equivalent to "|attr"; these attributes are said to be in the "per-element-type namespace partition"). An asterisk may be used for the namespace prefix indicating that the selector is to match all attribute names without regard to the attribute's namespace.

CSS examples:

@namespace foo "http://www.example.com";
[foo|att=val] { color: blue }
[*|att] { color: yellow }
[|att] { color: green }
[att] { color: green }

The first rule will match only elements with the attribute att in the "http://www.example.com" namespace with the value "val".

The second rule will match only elements with the attribute att regardless of the namespace of the attribute (including no namespace).

The last two rules are equivalent and will match only elements with the attribute att where the attribute is not in a namespace.

Source: http://www.w3.org/TR/selectors/#attrnmsp