CODEWITHSUNDEEP
htmlcsscss-selectors
Jonathan Andersson
Jonathan Andersson

Reputation: 1422

Css attribute selector where attribute name containing : in it

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?

Upvotes: 4

Views: 428

Answers (2)

user663031
user663031

Reputation:

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.

See also this and this.

Upvotes: 4

dippas
dippas

Reputation: 60543

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>

Upvotes: 5

Related Questions