When styling XML with CSS, how do I access tag names that contain periods or colons?

Question

I am developing an XML document containing tags like <ab></ab> or <b:c></b:c> . Now, of course, if I write CSS rules, for example

 ab { } b:c { } 

This will not work because these characters will be interpreted as classes and pseudo-classes, respectively. Is there a way to reference these tag names in CSS? (I do not want to use XSL ...)

Answer 1

As already mentioned, for reference to element c . in its tag name you can just escape it:

 a\.b 

But the same cannot be said for the b:c element, because : has special meaning in XML, as a namespace delimiter. This means that the element you have is actually an element c in the namespace b , not an element named b:c . ¹

However, there are two correct ways to select this item. Firstly, since, as I mentioned, the element is actually called c , not b:c , you can simply use:

 c 

The second way, in case of namespace conflicts, is to first declare the namespace b at the beginning of your stylesheet using @namespace , which matches the one contained in your XML document (the document must have xmlns: b link), otherwise it will not be valid):

 /* Whichever URL corresponds to xmlns:b in your XML document */ @namespace b 'http://ns.example.com/b'; 

Then use the namespace prefix to select the item:

 b|c 

---

¹ _{Remember that we are talking about XML here, not HTML or an arbitrary markup language, where : does not really matter.}