Menu
How should I escape attributes in the css/js attibute selector [attr=value]?
Specifically, is this correct?
document.querySelector('input[name="test[33]"]')
I'm looking for the "standard way" of doing this, if any, because I don't want Sizzle using a heavy-to-execute fallback function
954
The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned.
The attr() method sets or returns attributes and values of the selected elements. When this method is used to return the attribute value, it returns the value of the FIRST matched element. When this method is used to set attribute values, it sets one or more attribute/value pairs for the set of matched elements.
CSS [attribute="value"] Selector The [attribute="value"] selector is used to select elements with a specified attribute and value.
[attribute|=”value”] Selector: This selector is used to select all the elements whose attribute has a hyphen-separated list of values beginning with the specified value. The value has to be a whole word either alone or followed by a hyphen.
Yes, that is one correct approach. The Selectors Level 3 specification states the following:
Attribute values must be CSS identifiers or strings.
The example in your question uses a string as the attribute value. An "identifier" is defined as follows:
In CSS, identifiers... can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code...
So following that, it is also legal to escape the special characters and omit the quotes:
document.querySelector('input[name=test\\[33\\]]')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
