1

I have the following element:

<page-title xml:lang="x-default">Text</page-title>

I need to be able to select it by its attribute as a have a list of tags, that I need to select individually.

The issue is I cannot select the element with:

page-title[xml:lang="x-default"]

As the ":" colon seems to break the attribute as its probably not a valid character to use. I know that you can use wildcard selectors for the value of the attribute such as * for containing and ^ for begins with, and so on.

My question is, is it possible to build a selector which uses wildcard not for the attribute value but for the attribute name itself? such as:

page-title[*lang="x-default"]

For a selector which would get a element with an attribute name containing "lang" which has a value of "x-default"?

Can this perhaps somehow be done with JavaScript? I also have jQuery available if that would be an option.

Mikkel Fennefoss
  • 857
  • 1
  • 9
  • 32

1 Answers1

2

To escape a character in a jQuery/JS selector you can use \\:

$('page-title[xml\\:lang="x-default"]').addClass('jquery'); // jquery

document.querySelector('page-title[xml\\:lang="x-default"]').classList.add('native'); // native
.jquery { color: #C00; }
.native { text-decoration: underline; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<page-title xml:lang="x-default">Text</page-title>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339