@namespace

@namespace объявляет пространство имён и (опционально) присваивает ему префикс, чтобы использовать в селекторах вида svg|circle или *|a. Это нужно, когда в документе встречаются элементы из разных XML‑пространств имён: SVG, MathML и тому подобные.

        
          
          <div class="block">  <a class="link" href="#">HTML‑ссылка</a>  <svg class="icon" viewBox="0 0 64 24" xmlns="http://www.w3.org/2000/svg">    <a href="#">      <text x="0" y="16">SVG‑ссылка</text>    </a>    <circle cx="52" cy="12" r="10"/>  </svg>  <p>Текст</p></div>
          <div class="block">
  <a class="link" href="#">HTML‑ссылка</a>
  <svg class="icon" viewBox="0 0 64 24" xmlns="http://www.w3.org/2000/svg">
    <a href="#">
      <text x="0" y="16">SVG‑ссылка</text>
    </a>
    <circle cx="52" cy="12" r="10"/>
  </svg>
  <p>Текст</p>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          /* Объявляем префикс svg для SVG‑пространства имён */@namespace svg url("http://www.w3.org/2000/svg");/* Любая ссылка из любого пространства имён */*|a { text-decoration: underline; }/* Только SVG‑элементы <a> (внутри <svg>) */svg|a { text-decoration: none; }/* Только SVG‑круги */svg|circle { fill: #2E9AFF; }
          /* Объявляем префикс svg для SVG‑пространства имён */
@namespace svg url("http://www.w3.org/2000/svg");

/* Любая ссылка из любого пространства имён */
*|a { text-decoration: underline; }

/* Только SVG‑элементы <a> (внутри <svg>) */
svg|a { text-decoration: none; }

/* Только SVG‑круги */
svg|circle { fill: #2E9AFF; }

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Директивы @namespace записывают только на верхнем уровне стиля (нельзя вкладывать внутрь правил). Принято располагать их в начале файла — до селекторов, которые используют префиксы.

Варианты объявления:

        
          
          /* Пространство по умолчанию для селекторов без префикса */@namespace url("http://www.w3.org/1999/xhtml");/* Пространство с префиксом */@namespace svg url("http://www.w3.org/2000/svg");/* Несколько пространств с разными префиксами допускаются */@namespace svg url("http://www.w3.org/2000/svg");@namespace mml url("http://www.w3.org/1998/Math/MathML");
          /* Пространство по умолчанию для селекторов без префикса */
@namespace url("http://www.w3.org/1999/xhtml");

/* Пространство с префиксом */
@namespace svg url("http://www.w3.org/2000/svg");

/* Несколько пространств с разными префиксами допускаются */
@namespace svg url("http://www.w3.org/2000/svg");
@namespace mml url("http://www.w3.org/1998/Math/MathML");

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Использование в селекторах:

• svg|circle — типовой селектор в указанном пространстве (svg).
• *|a — элемент a в любом пространстве имён.
• |a — элемент a без пространства имён.

Если префикс не объявлен, селекторы с ним считаются невалидными. Если объявлено «пространство по умолчанию», оно применяется к типовым селекторам без префикса.

Пространство имён (namespace) — это механизм, который позволяет однозначно идентифицировать элементы и атрибуты. Он помогает избежать конфликтов между разными технологиями, использующими одинаковые имена тегов. Представьте, что это «фамилия» для тегов: тег <a> может быть ссылкой в HTML, а в SVG это тоже ссылка, только с другим поведением и атрибутами. Пространство имён говорит браузеру: «Этот <a> — из семейства HTML, а этот — из семейства SVG».

В HTML‑документах вместе с разметкой часто встраивают SVG/MathML. Такие узлы принадлежат другим пространствам имён, и иногда нужно адресоваться к ним отдельно от HTML‑элементов. @namespace даёт безопасный и явный способ разделять выбор элементов в разных пространствах.

Например, *|a применится сразу к HTML‑ссылкам и к SVG‑ссылкам (узлам <a> в SVG), а svg|a — только к ссылкам внутри SVG.

💡 Размещайте @namespace в начале файла до всех селекторов с префиксами.
💡 Для SVG почти всегда используйте url("http://www.w3.org/2000/svg"); для HTML — url("http://www.w3.org/1999/xhtml").
💡 В HTML‑страницах объявление @namespace не обязательно, если вы не используете префиксы в селекторах.
💡 URL в объявлении @namespace чувствительны к регистру. Например, http://www.w3.org/2000/svg и http://www.w3.org/2000/SVG — это разные пространства имён.