@namespace

概要

@namespace は、CSS スタイルシート で使用する XML 名前空間を定義する @-規則です。名前空間に含まれる要素のみ選択するよう、全称、要素型、属性の各セレクタを制限するために名前空間を使用できます。@namespace 規則は通常、複数の名前空間を含むドキュメント (インラインで SVG や MathML を含む HTML5 ドキュメントや、複数のボキャブラリが混在する XML ドキュメントなど) を扱う際に役立ちます。

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

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

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

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

構文

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

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

形式文法

@namespace <namespace-prefix>? [ <string> | <uri> ];
where 
<namespace-prefix> = IDENT

例

@namespace url(https://www.w3.org/1999/xhtml);
@namespace svg url(https://www.w3.org/2000/svg);

/* XHTML が既定の接頭辞なし名前空間であるため、これはすべての XHTML <a> 要素にマッチする */
a {}

/* これはすべての SVG <a> 要素にマッチする */
svg|a {}

/* これは XHTML および SVG の <a> 要素にマッチする */
*|a {}

仕様

ブラウザ実装状況