Differencebetween * and *|* in CSS

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>

What does *|* this mean in CSS?

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

More on universal selectors and namespaces.

What is the difference between the System.Web.Mvc Namespace and the System.Web.Routing Namespace

Routing can be used outside of the MVC framework, such as in WebForms

I think MS duplicated MVC Routing into System.Web.Routing to make the lack of dependency on MVC more explicit - but kept the old namespace for backward compatibility.

What's the difference between [attribute|=value] and [attribute^=value] CSS selectors?

MDN has the better description:

[attr|=value]
Represents an element with an attribute name of
attr. Its value can be exactly “value” or can begin with “value”
immediately followed by “-” (U+002D). It can be used for language
subcode matches.

[attr^=value]
Represents an element with an attribute name of attr
and whose value is prefixed by "value".

So [attr|=foo] would match attr="foo" or attr="foo-bar", but not attr="foobar".

[attr^=foo] on the other hand would match any of those.

The primary purpose of |= is, as described, for matching locale/language codes like en-us. Note that for languages specifically you should be using :lang() however, which is a lot more flexible.

What is the difference between E F and E ~ F css3 selectors

E F

selects an Element F which is a child (descendant) of E. So you have a nested structure, where E is the parent (ancestor) of F.

<!-- E F will match: -->
<e>
  <f></f>
</e>

this is similar to E > F which will only match if F is a direct child of E (no other elements in between).

While

E ~ F

selects an Element F which is preceded by an element E. In this case, you have a non-nested structure and E and F are Siblings.

<!-- E ~ F will match: -->
<e></e>
<f></f>

which again is similar to E + F except that here, F must follow E directly (with no other Element in between).

---

Related Topics