What are elements in no namespace in CSS?

Viewed 67

This is an exemple in CSS Namespaces:

Given the namespace declarations:

@namespace toto "http://toto.example.org";
@namespace "http://example.com/foo";

In a context where the default namespace applies

  • toto|A: represents the name A in the http://toto.example.org namespace.
  • |B: represents the name B that belongs to no namespace.
  • *|C: represents the name C in any namespace, including no namespace.
  • D: represents the name D in the http://example.com/foo namespace.

What is an exemple of B in a HTML document? What is an exemple of |B as a CSS selector?

I tried with a custom element, but it seems declared in the (default) XHTML namespace.

1 Answers

You can't have case B in a pure, valid HTML document. You can in an XML document.

We can add an element in no namespace using createElementNS() in script. (Doing so means the document is no longer valid HTML).

|B {
  color:red;
}
<B>foo</B>
<script>
  const b = document.body.appendChild(document.createElementNS('', 'B'));
  b.appendChild(document.createTextNode('bar'));
</script>

Related