I'm trying to target an elements attribute that contains a colon: :
.someclass[xml:lang="da"]
HTML:
<span class="someclass" xml:lang="da">
Is this possible, does not work with above syntax?
2 Answers
CSS has special characters that cannot be applied in class names, so to use them, CSS escapes with a backslash (\)
here is the list of the special characters:
!, ", #, $, %, &, ', (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?, @, [, \, ], ^, `, {, |, }, and ~
.someclass[xml\:lang="da"] {
background: red
}<span class="someclass" xml:lang="da"> text</span>3 Comments
TylerH
@dippas wasn't me, but perhaps because someone recommends lang over xml:lang?
dippas
I was thinking that, I didn't elaborate on that matter given I didn't have enough info from the OP, therefore I just give the info to fix the OP problem
I do not recommend using the xml:lang attribute. You should use the lang attribute instead. The lang attribute has the special behavior that it can be placed on any element at any level of the hierarchy, and then addressed via the :lang pseudo-class, allowing you to define rules such as
:lang(de) {quotes: "«" "»"; }
and things will "just work".
Consult answers such as this one. Excerpt:
Note however that you may only use the
xml:langattribute if you either have an XML document or also define thelangattribute, and in the latter case they must have the same value. This is becausexml:langis allowed only to ease transition of old XHTML documents.
xml:langis only a valid attribute in the html tag.