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