@namespace は、CSS スタイルシート で使用する XML 名前空間を定義する @-規則です。定義済みの名前空間は、全称、要素型、属性の各セレクターで、その名前空間内の要素だけを選択するために使用することができます。 @namespace 規則は通常、複数の名前空間を含む文書 (インラインで SVG や MathML を含む HTML5 文書や、複数のボキャブラリが混在する XML 文書など) を扱う際に役立ちます。
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
/* XHTML は既定で接頭辞のない名前空間であるため、これは XHTML のすべての <a> 要素を選択します。 */
a {}
/* これはすべての SVG <a> 要素を選択します。 */
svg|a {}
/* This matches both XHTML and SVG <a> elements */
*|a {}
@namespace 規則は、スタイルシート内ですべての @charset および @import 規則より後、また他の @-規則やスタイル宣言より前に配置しなければなりません。
@namespace は、スタイルシートの既定の名前空間を定義できます。既定の名前空間を定義するとすべての全称セレクターや要素型セレクター (属性セレクターは除く。後述の注記を参照) は、既定の名前空間内の要素にのみ適用されます。
また、 @namespace 規則で名前空間の接頭辞を定義できます。全称セレクター、要素型セレクター、属性セレクターに名前空間の接頭辞を付加すると、これらのセレクターは名前空間および要素または属性に一致する場合のみ一致します。
HTML5 では、既知の外来要素へ自動的に名前空間が割り当てられます。すなわち、 HTML 要素は文書内に xmlns 属性が存在しなくても XHTML 名前空間 (http://www.w3.org/1999/xhtml) に含まれているかのように動作します。また <svg> および <math> 要素は、適切な名前空間 (http://www.w3.org/2000/svg および http://www.w3.org/1998/Math/MathML) が割り当てられます。
メモ: XML では、属性に直接接頭辞を定義しない限り (例: xlink:href)、属性は名前空間を持ちません。言い換えると、属性は所属する要素から名前空間を継承しません。この動作に合わせるため、 CSS の既定の名前空間は属性セレクターに適用しません。
/* 既定の名前空間 */ @namespace url(XML-namespace-URL); @namespace "XML-namespace-URL"; /* 接頭辞つき名前空間 */ @namespace prefix url(XML-namespace-URL); @namespace prefix "XML-namespace-URL";
| 仕様書 | 状態 | 備考 |
|---|---|---|
| {{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}} | {{Spec2('CSS3 Namespaces')}} | 初回定義 |
{{Compat("css.at-rules.namespace")}}