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.
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>