@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 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 mml url("http://www.w3.org/1998/Math/MathML");

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

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

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

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

В 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.