In CSS, *
will match any element.
Frequently, *|*
is used instead of *
to match all elements. This is generally used for testing purposes.
What is the difference between *
and *|*
in CSS?
In CSS, *
will match any element.
Frequently, *|*
is used instead of *
to match all elements. This is generally used for testing purposes.
What is the difference between *
and *|*
in CSS?
As per W3C Selector Spec:
The universal selector allows an optional namespace component. It is used as follows:
ns|*
all elements in namespace ns
*|*
all elements
|*
all elements without a namespace
*
if no default namespace has been specified, this is equivalent to *|*. Otherwise it is equivalent to ns|* where ns is the default namespace.
So, no *
and *|*
are not always the same. If a default name space is provided then *
selects only elements that are part of that namespace.
You can visually see the differences using the below two snippets. In the first, a default namespace is defined and so the *
selector applies the beige colored background only to the element which is part of that namsepace whereas the *|*
applies the border to all elements.
@namespace "http://www.w3.org/2000/svg";
* {
background: beige;
}
*|* {
border: 1px solid;
}
<a href="#">This is some link</a>
<svg xmlns="http://www.w3.org/2000/svg">
<a xlink:href="#">
<text x="20" y="20">This is some link</text>
</a>
</svg>