CSS - @namespace

• トップ
• CSSリファレンス
• @namespace

概要

説明

ネームスペース(名前空間)を指定します。XHTML 中に SVG や MathML を異なった名前空間で埋め込む際などに使用します。

使用例

最初の形式はデフォルトのネームスペースを指定します。次の形式は名前付きのネームスペースを指定します。

@namespace url(http://www.w3.org/1999/xhtml);              /* 名前無しのデフォルトの名前空間 */
@namespace svg url(http://www.w3.org/2000/svg);            /* 名前(svg)付きの名前空間 */
@namespace mathml url(http://www.w3.org/1998/Math/MathML); /* 名前(mathml)付きの名前空間 */

@namespace で定義した名前は、次のように使用します。

svg {
  background-color: #ddd;
}

/* デフォルト名前空間の a 要素に対するスタイル指定 */
a {
  color:red;
}

/* svg名前空間の a 要素に対するスタイル指定 */
svg|a {
  color:blue;
}

<a href="#">DEFAULT_NAMESPACE_A</a>
<svg>
  <a href="#"><text x="10" y="70" fill="currentColor">SVG_A</text></a>
</svg>

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/@namespace
• https://w3c.github.io/csswg-drafts/css-namespaces-3/#declaration