Разделитель пространства имён

Разделитель пространства имён (|) отделяет селектор от пространства имён, указывая пространство имён или его отсутствие для селектора типа.

/* Links in the namespace named myNameSpace */
myNameSpace|a {
  font-weight: bold;
}
/* paragraphs in any namespace (including no namespace) */
*|p {
  color: darkblue;
}
/* heading level 2 not in a namespace */
|h2 {
  margin-bottom: 0;
}

Селекторы типа и универсальный селектор допускают необязательный компонент пространства имён. Если пространство имён было объявлено ранее с помощью @namespace, к этим селекторам можно добавить пространство имён, указав его имя перед селектором и отделив его разделителем пространства имён (|). Это полезно при работе с документами, содержащими несколько пространств имён, например с HTML, включающим встроенные SVG или MathML, либо с XML, объединяющим несколько словарей.

• ns|h1 — выбирает элементы <h1> в пространстве имён ns
• *|h1 — выбирает все элементы <h1>
• |h1 — выбирает все элементы <h1> вне любых объявленных или подразумеваемых пространств имён

Синтаксис

namespace|element { style properties }

Примеры

По умолчанию все элементы HTML или SVG принадлежат пространству имён, поскольку подразумеваются пространства имён http://www.w3.org/1999/xhtml и http://www.w3.org/2000/svg. Метод document.createElementNS с пустой строкой в качестве параметра пространства имён позволяет создавать элементы без пространства имён.

Пример с именованным пространством имён

В этом примере все элементы принадлежат пространству имён.

HTML

В HTML или внутри SVG пространства имён явно не объявлены.

<p>This paragraph <a href="#">has a link</a>.</p>

<svg width="400" viewBox="0 0 400 20">
  <a href="#">
    <text x="0" y="15">Link created in SVG</text>
  </a>
</svg>

CSS

В CSS объявляются два пространства имён, а затем задаются стили для ссылок в целом (a), для ссылок без пространства имён (|a), для ссылок в любом пространстве имён или без него (*|a), а затем для ссылок в двух разных именованных пространствах имён (svgNamespace|a и htmlNameSpace|a).

@namespace svgNamespace url("http://www.w3.org/2000/svg");
@namespace htmlNameSpace url("http://www.w3.org/1999/xhtml");
/* All `<a>`s in the default namespace, in this case, all `<a>`s */
a {
  font-size: 1.4rem;
}
/* no namespace */
|a {
  text-decoration: wavy overline lime;
  font-weight: bold;
}
/* all namespaces (including no namespace) */
*|a {
  color: red;
  fill: red;
  font-style: italic;
}
/* only the svgNamespace namespace, which is <svg> content */
svgNamespace|a {
  color: green;
  fill: green;
}
/* The htmlNameSpace namespace, which is the HTML document */
htmlNameSpace|a {
  text-decoration-line: line-through;
}

Результат

Селектор |a, ссылка без пространства имён, не соответствует ни одной ссылке. В HTML подразумевается http://www.w3.org/1999/xhtml, то есть весь HTML принадлежит пространству имён, даже если оно не объявлено явно. В SVG также подразумевается пространство имён http://www.w3.org/2000/svg, даже если оно не задано явно. Это означает, что всё содержимое относится как минимум к одному пространству имён.

Пространство имён по умолчанию и отсутствие пространства имён

В этом примере мы используем JavaScript, чтобы создать элемент без пространства имён и добавить его в документ. Мы задаём пространство имён SVG как пространство имён по умолчанию, объявляя безымянное пространство имён с помощью @namespace.

HTML

В HTML или внутри SVG пространства имён явно не объявлены.

<p><a href="#">A link</a> in the implied HTML namespace.</p>

<svg width="400" viewBox="0 0 400 20">
  <a href="#">
    <text x="0" y="15">Link created in SVG namespace</text>
  </a>
</svg>

JavaScript

С помощью JavaScript и метода document.createElementNS мы создаём ссылку без пространства имён, а затем добавляем её.

// create 'no namespace' anchor
const a = document.createElementNS("", "a");
a.href = "#";
a.appendChild(document.createTextNode("Link created without a namespace"));

document.body.appendChild(a);

CSS

Мы объявляем пространство имён с помощью @namespace. Если не указывать имя пространства имён, объявление @namespace создаёт пространство имён по умолчанию.

/* By omitting a name, this sets SVG as the default namespace */
@namespace url("http://www.w3.org/2000/svg");

/* `<a>` in the default (set to SVG) namespace */
a {
  font-size: 1.4rem;
}

/* `<svg>` and `<p>` in the default (set to SVG) namespace */
svg,
p {
  border: 5px solid gold;
}

/* links outside of any namespace */
|a {
  text-decoration: wavy underline purple;
  font-weight: bold;
}

/* links with any namespace or no namespace */
*|a {
  font-style: italic;
  color: magenta;
  fill: magenta;
}

Результат

Селектор без разделителя пространства имён, a, выбрал только элементы SVG <a>, поскольку SVG было задано как пространство имён по умолчанию.

Селектор без пространства имён, |a, выбрал добавленный с помощью JavaScript элемент <a>, поскольку этот узел — единственный, у которого нет пространства имён по умолчанию.

Спецификации

Совместимость с браузерами

См. также

• @namespace
• метод Document.createElementNS()
• свойство Element.namespaceURI
• Селектор типа CSS
• Универсальный селектор CSS
• Модуль селекторов CSS