Css attribute selector where attribute name containing : in it

Question

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?

Sidenote: `xml:lang` is only a valid attribute in the html tag. — antidecaf, Aug 23 '16 at 13:38

score 5 · Accepted Answer · answered Aug 23 '16 at 13:26

5

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>

answered Aug 23 '16 at 13:26

dippas

58,591
15
114
126

@dippas wasn't me, but perhaps because someone recommends lang over xml:lang? – TylerH Aug 23 '16 at 14:10
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 – dippas Aug 23 '16 at 14:13
I do recommend `lang` over `xml:lang`, but did not downvote this. – Aug 23 '16 at 14:15

score 4 · Answer 2 · edited May 23 '17 at 12:02

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:lang attribute if you either have an XML document or also define the lang attribute, and in the latter case they must have the same value. This is because xml:lang is allowed only to ease transition of old XHTML documents.

Css attribute selector where attribute name containing : in it

2 Answers2