Jonathan Andersson Jonathan Andersson - 3 months ago 6
CSS Question

Css attribute selector where attribute name containing : in it

I'm trying to target a elements attribute that contains

:


.someclass[xml:lang="da"]


Html:

<span class="someclass" xml:lang="da">


Is this possible, dose not work with above syntax?

Answer

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>