CSSで名前空間セパレ―タ（|）を使う

CSSで見かけないセレクタ（|）があった。

「|」はNamespace Separator（名前空間セパレータ）と呼ばれるもので、セレクタと名前空間（@namespace）を分離するために使われる。

/* XHTMLの名前空間*/
@namespace url(http://www.w3.org/1999/xhtml);
/* SVGの名前空間 */
@namespace svg url(http://www.w3.org/2000/svg);

a {
  color: red;
  text-decoration: underline dashed;
}
svg|a {
  fill: green;
  text-decoration: underline solid;
}

デモ