（ちょっとメモ）名前空間（ネームスペース）とCSSセレクター

名前空間（name space）って、プログラマーのかたには聞き慣れたコトバかもですが、主にデザイン業務の私には、聞いたことが無い世界でした（汗）。

CSSのセレクターの仕様書では「名前空間」に属する要素を対象にしたセレクターの書き方が載っています。
今回はとりあえず、それが「どんなものなのか」だけ、触れておこうと思います。

本日のINDEX

1. CSSセレクターでの名前空間（ネームスペース）
2. CSSセレクターでの名前空間の書き方
   1. エレメンタルセレクターと名前空間
   2. 属性セレクターと名前空間

参考：
・Selectors Level 3 | W3C Recommendation
・Selectors Level 4 | W3C Working Draft
・CSS セレクター | MDN
・@namespace | MDN
・名前空間の速修講座 | MDN

CSSセレクターでの名前空間（ネームスペース）

プログラミング言語では、同じファイルに同じ関数名や定数名が存在できないのですが、「名前空間」でグループ化することで、その名前空間に属する◯◯と限定して、他の同名のものと衝突を避けることができるんだそうです。

この記事では、あくまでも HTMLの中で使う名前空間（name space）と、その名前空間に属する要素を CSSセレクターにするときの書き方だけをまとめていきます。

これは、CSSのアットールールの @namespace を使って名前空間を宣言するやり方です。

HTMLで使われる名前空間のある言語で、代表的なのは SVG（2次元ベクター形式のための XMLベースのマークアップ言語）ですので、SVGでサンプルを作ってみました。

XMLから派生したSVG（や MathML）などは、同じファイルに XML、SVG、MathML が混在した場合に、それぞれの言語に同じタグがあった場合 UA（ブラウザ） が混乱しかねない。それを避けるために「名前空間宣言」を与えるのだそうです。

SVGは、HTML内では <svg>要素を使用して書きます（HTML5から）
この時「xmlns属性」を使って <svg xmlns="http://www.w3.org/2000/svg"> と書くことで「この <svg>要素とその子孫要素は、http://www.w3.org/2000/svg という名前空間に属する」と宣言できるんだって。これを「名前空間宣言」と言うそうです。
ただし、HTML5の <svg>要素は、この↑名前空間だと決まってるので、この「xmlns属性」による宣言は省略しても良いことになっているんだそうです。

<svg>要素に関しては、こちらをご覧ください↓
[70-1] svg要素でベクターグラフィクスを埋め込もう

CSSセレクターでの名前空間の書き方

CSS で名前空間を使ったセレクターにできるのは、
・エレメンタルセレクター（ユニバーサルセレクターとタイプセレクター）
・属性セレクター
です。

どれもまずは一番最初に、アットルールの @namespace で「規定の XML名前空間」を定義します。

SVGの場合は、このように指定してから、この下にスタイル指定をします。

@namespace svg "http://www.w3.org/2000/svg";

この @namespace の指定は、置く場所に決まりがあります。
・@charset と @import より後に書かなければなりません。
・他のアットルール や スタイル宣言（CSSStyleDeclaration） よりも前に書かなければなりません。

こんなかんじです↓

@charset "UTF-8";
/*base.css */
@import url('https://fonts.googleapis.com/css?family=Ubuntu');

/*他のいろいろなスタイル指定*/

@namespace svg "http://www.w3.org/2000/svg";
svg|text {
	fill: deepskyblue;
    }
svg|a {
	fill: blue;
    text-decoration:underline;
    }


var styleObj = document.styleSheets[0].cssRules[0].style;
console.log(styleObj.cssText);

for (var i = styleObj.length; i--;) {
  var nameString = styleObj[i];
  styleObj.removeProperty(nameString);
}

console.log(styleObj.cssText);


@media screen and (max-width: 1000px) { /*他のアットルール*/
}

エレメンタルセレクターと名前空間

エレメンタルセレクターとは「タイプセレクター」や「*（ユニバーサルセレクター）」のこと。

さっそく SVG を作って、CSSだけで色を指定してみました。

See the Pen エレメンタルセレクターと名前空間TEST by yuki★hata (@yuki__hata) on CodePen.

HTMLはこうなっています。

<svg width="200" height="200"> <!--xmlns属性はあえて省略しています-->
  <rect width="100%" height="100%" />
  <circle cx="100" cy="100" r="90" />
  <text x="100" y="90" font-size="20" text-anchor="middle">text1</text>
  <a href="#pt2-1"><text x="100" y="120" font-size="20" text-anchor="middle">text2</text></a>
</svg>

四角（rect）も円（circle）もテキストも、色の指定はしていません。
この状態だと、図形全部がデフォルトの「黒（#000000）」で描画されます。

CSSで、名前空間を使ったセレクターで色指定します。

@namespace svg "http://www.w3.org/2000/svg";
svg|rect {fill: powderblue}
*|circle {fill: mistyrose}
svg|text {fill: deepskyblue}
a > text {fill: blue; text-decoration:underline}

1行目（@namespace svg "http://www.w3.org/2000/svg";）は名前空間宣言です。

2行目と4行目は、名前空間接頭辞（このサンプルでは svg）とタイプセレクター（要素名）の間を「 |（バーティカルバー）」で区切ってセレクターにします。
svg|rect と書けば「名前空間svg に属する <rect>要素」というセレクターになります。

3行目の「*|circle」というセレクターは、「どの名前空間にも属する <circle>要素」というセレクターです。（どの名前空間にも属さない要素も含みます）

5行目は普通のタイプセレクター（と結合子）ですが、最初に名前空間宣言をしているので、a > text というセレクターは、svg|a > text と同じになります。

名前空間を使った「タイプセレクター」の構文をまとめると下記のようになっています。
（参考：W3C仕様書 Selectors Level 3 - 6.1.1. Type selectors and namespaces）

ns|E	名前空間ns に属する E要素
*|E	どんな名前空間にも属する E要素。どの名前空間にも属さない E要素も含む
|E	どの名前空間にも属さない E要素
E	規定の名前空間が宣言されていない場合は *|E と同じ 宣言されている場合は、ns|E と同じ

名前空間を使った「ユニバーサルセレクター」の構文はこちら。
（参考：W3C仕様書 Selectors Level 3 - 6.2.1. Universal selector and namespaces）

ns|*	名前空間ns に属するすべての要素
*|*	すべての要素
|*	どの名前空間にも属さないすべての要素
*	規定の名前空間が宣言されていない場合は *|* と同じ 宣言されている場合は、ns|* と同じ

属性セレクターと名前空間

名前空間の中にある「属性」を持つ要素を、セレクターとして指定することもできます。
名前空間接頭辞と属性名の間を「 |（バーティカルバー）」で区切って、さらにそれ全体を [ ] で囲んでセレクターにします。

ただこれ、規定の名前空間は属性には適用されない んだそうです。
（例えば SVGの名前空間を使って [svg|〇〇] と指定しても何も起こりません）

W3C仕様書の説明：In keeping with the Namespaces in the XML recommendation, default namespaces do not apply to attributes, （XML勧告の名前空間に従って、デフォルトの名前空間は属性には適用されません）

それはさておき、とにかく構文を貼っておきます。
名前空間を使った「属性セレクター」の構文をまとめると下記のようになっています。
（参考：W3C仕様書 Selectors Level 4 - 6.4. Attribute selectors and namespaces
「属性セレクターと名前空間」は、まだ草案の Selectors Level 4 に掲載されています）

[foo|att=val]	名前空間foo に属する att属性で 値がval な要素
[*|att]	どんな名前空間にも属する att属性をもつ要素。どの名前空間にも属さない att属性をもつ要素も含む
[|att]	どの名前空間にも属さない att属性をもつ要素
[att]	どの名前空間にも属さない att属性をもつ要素（ [|att] と同じ）

で、サンプルです。
SVGで描画して、属性セレクターで色を付けてみました。

See the Pen 属性セレクターと名前空間TEST by yuki★hata (@yuki__hata) on CodePen.

HTMLは、さっきのサンプルとほぼ同じだけど、これ。
図形やテキストは色指定していないので、このままだと真っ黒に描画されます。

<svg width="200" height="200">
  <rect width="100%" height="100%" />
  <circle cx="100" cy="100" r="90" />
  <text x="100" y="110" font-size="20" text-anchor="middle">SVG</text>
</svg>

CSSです。

@namespace svg "http://www.w3.org/2000/svg"; /*一応宣言してみた*/
[svg|width="100%"] {fill: lightpink}/*これは無効でした。詳細はすぐ下で↓*/
[*|width="100%"] {fill: lightpink}
[|cx="100"] {fill: lightyellow}
[text-anchor] {fill: red}

1つ目のセレクター [svg|width="100%"] は無効でした。何も起こらず。
で、svg という「規定の名前空間」は「属性セレクターで使えない」という仕様書の文言に気がついて、2行目以降を指定しました。
[*|width="100%"]（2つ目）は、どの名前空間にも属さない属性も使えるので有効。width属性の値が「100％」な要素は <rect>要素しかないのでセレクターとして効きました。
[|cx="100"]（3つ目）は、どの名前空間にも属さない cx属性の値が「100」な要素（= <circle>要素）
4つ目は、もう名前空間なんて無関係な普通の属性存在セレクターです。text-anchor属性は SVGの<text>要素に適用されます。

今回、仕様書を読んでみて思ったのは、
名前空間宣言（@namespace で）をしておけば、エレメンタルセレクターなら「 | 」を使う構文通りに書かずに、そのままでイイんだということ。
例えば h1 {...} と書いても、ns|h1 {...} と書いたのと同じだし。
構文どおり書かなくても、名前空間宣言（@namespace）さえしておけばいいかんじ。

CSSで名前空間が使えるって、使いこなせる人にとっては便利な仕様なんでしょうね。私は使うことは無いだろうな...たぶん（笑）

次回予告

さて、エレメンタルセレクターや属性セレクターの話は今回で終わりです。

次回から、疑似クラス や 疑似要素 について見ていきましょう。
両方とも、今までやった エレメンタルセレクターや属性セレクターにくっつけて使うもので、より詳細に要素をセレクトできるようになります。
次回は、この2つの「違い」やそれぞれの「特徴」についてまとめます。