CSS Namespace Selector (|) Selector

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The Namespace Separator (|) selector in CSS is a specialized selector used to target elements based on their namespace, which is particularly relevant in XML, SVG, and XHTML documents where multiple namespaces may coexist. Namespaces in markup help distinguish elements that may share the same name but belong to different vocabularies, preventing conflicts and allowing precise styling. The Namespace Separator (|) provides a way to specify which namespace an element belongs to directly within a CSS selector.

When using the Namespace Separator (|), the part before the pipe (|) represents the namespace prefix, and the part after the pipe specifies the element name. If no prefix is given, it can be used to target elements in the default namespace. This is particularly useful in documents like SVG where you might have <svg:rect> elements and other namespaced elements coexisting, and you only want to style the <svg:rect> elements without affecting other <rect> elements that might exist in another namespace. For example, you might write svg|rect { fill: blue; } to target only rectangles within the SVG namespace.

This selector works in combination with other selectors to refine your targeting. You could pair it with class selectors, attribute selectors, or even the Child Combinator (>) to apply styles more precisely. For example, svg|g > svg|rect would select all <rect> elements that are direct children of <g> elements, both within the SVG namespace. It ensures that styles like fill or stroke are applied only to the intended namespaced elements, without accidentally affecting similarly named elements from other namespaces.

In addition to SVG, the Namespace Separator (|) can also be applied in XML-based documents with custom namespaces. For instance, in a document using a custom namespace for widgets, widget|button { background-color: red; } ensures that only buttons defined within the widget namespace are styled, leaving other <button> elements untouched. This makes it a powerful tool in complex documents where multiple vocabularies coexist and precise CSS targeting is required.

Syntax

namespace | element { css declarations; }

Example

HTML

<body>



  <a href="https://www.google.com">I am an HTML link</a>



  <br><br>



  <svg width="200" height="60" xmlns="http://www.w3.org/2000/svg">

    <a href="https://www.wikipedia.org">

      <text x="0" y="25" fill="blue">I am an SVG link</text>

    </a>

  </svg>



</body>

CSS

/* 1. Define the namespaces */

@namespace html "http://www.w3.org/1999/xhtml";

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



/* 2. Target 'a' tags only in the HTML namespace */

html|a {

  color: green;

  font-weight: bold;

  text-decoration: none;

}



/* 3. Target 'a' tags only in the SVG namespace */

svg|a {

  cursor: help;

}



/* 4. Target all 'a' tags regardless of namespace (Universal) */

*|a {

  font-size: 20px;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS Namespace Selector (|) selector. Hover over a browser icon to see the version that first introduced support for this selector.