@namespace CSS アットルール

試してみましょう

@namespace svg url("/proxy/www.w3.org/2000/svg");

a {
  color: orangered;
  text-decoration: underline dashed;
  font-weight: bold;
}

svg|a {
  fill: blueviolet;
  text-decoration: underline solid;
  text-transform: uppercase;
}

<p>
  <a href="#">これは通常の HTML のリンクです</a>
</p>

<svg width="250px" viewBox="0 0 250 20" xmlns="http://www.w3.org/2000/svg">
  <a href="#">
    <text x="0" y="15">これは SVG で作成されたリンクです</text>
  </a>
</svg>

構文

/* 既定の名前空間 */
@namespace url("XML-namespace-URL");
@namespace "XML-namespace-URL";

/* 接頭辞つきの名前空間 */
@namespace prefix url("XML-namespace-URL");
@namespace prefix "XML-namespace-URL";

解説

定義された名前空間は、全称、型、属性セレクターにおいて、選択する要素をその名前空間に制限するために使用することができます。 @namespace ルールは一般に、複数の名前空間を含む文書を扱う場合—例えば、HTML でインラインの SVG や MathML を併用する場合や、複数の語彙が混在する XML などでのみ役立ちます。

@namespace ルールは、スタイルシート内ですべての @charset および @import ルールより後、また他のアットルールやスタイル宣言より前に配置しなければなりません。

@namespace は、スタイルシートの既定の名前空間が定義できます。既定の名前空間を定義するとすべての全称セレクターや要素型セレクター（属性セレクターは除く。後述のメモを参照）は、既定の名前空間内の要素にのみ適用されます。

また、 @namespace ルールで名前空間の接頭辞が定義できます。全称セレクター、要素型セレクター、属性セレクターに名前空間の接頭辞を付加すると、これらのセレクターは名前空間および要素または属性に一致する場合のみ一致します。

HTML では、既知の外来要素へ自動的に名前空間が割り当てられます。すなわち、 HTML 要素は文書内に xmlns 属性が存在しなくても XHTML 名前空間 (http://www.w3.org/1999/xhtml) に含まれているかのように動作します。また <svg> および <math> 要素は、適切な名前空間（それぞれ http://www.w3.org/2000/svg および http://www.w3.org/1998/Math/MathML）が割り当てられます。

形式文法

@namespace = 
  @namespace <namespace-prefix>? [ <string> | <url> ] ;  

<namespace-prefix> = 
  <ident>  

例

既定かつ定義済みの名前空間の指定

@namespace url("/proxy/www.w3.org/1999/xhtml");
@namespace svg url("/proxy/www.w3.org/2000/svg");

/* XHTML は既定で接頭辞のない名前空間であるため、これは XHTML のすべての <a> 要素を選択します */
a {
}

/* これはすべての SVG <a> 要素を選択します */
svg|a {
}

/* XHTML と SVG の両方の <a> 要素に一致します */
*|a {
}

仕様書

ブラウザーの互換性

関連情報

• 名前空間の集中講座
• CSS アットルール関数