What does *|* this mean in CSS?

I just saw this: *|*:link with Firebug. It seems to be some default styling which Firefox appends, but what does *|* mean?


It means "all elements in all namespaces that are :link."

More on universal selectors and namespaces.


*|* is a namespace-qualified universal selector. The first * means any namespace (including the default namespace and the lack of a namespace), and the second * means any element type.

As mentioned, the selector *|*:link represents any element in any namespace that is an unvisited hyperlink (:link). To be clear, the *| prefix means certain elements in any namespace, including:

  • Elements in the default namespace (e.g. XHTML)
  • Elements in any other namespace (e.g. XUL in Firefox)
  • Elements that aren't in a namespace

CSS has a module dedicated to namespace declarations.

The document type determines what kind of elements should be designated as hyperlinks:

  • In HTML and XHTML, this is always an a element with a href attribute.

  • In XUL, I believe this is a label.text-link element with a href attribute.

Note that CSS namespaces are only useful when using CSS to style XML documents, or other document types that define namespaces similarly. This includes XHTML pages with custom XML namespaces. In regular HTML documents there is usually no need to use namespace prefixes in selectors.

That said, browsers declare a default namespace in their user agent stylesheets that corresponds to XHTML for HTML/XHTML anyway, to allow interoperability with other XML-based languages. In the case of Firefox, this is obviously for working with both XHTML and XUL:

@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

Since (X)HTML elements live in the default namespace, selectors for matching just these elements don't need to be namespace-prefixed. This is the technical reason why, as I mention above, there's no need to use namespace prefixes in selectors.

Note also that if you want to target any element type with a namespace prefix, the * on the right side must be there, so something like *|:link would be invalid. See this answer for details.