Селектор CSS [attribute$="value"] не работает должным образом ⇐ CSS

[Anonymous]

I have 4 elements with a class of either x-control-ui or y-control-ui:

x-control: y-control: Using the [attribute*="value"] selector works as expected, selecting them all:

document.querySelectorAll("[class*='-control-ui']") NodeList(4) [div.x-control-ui.hidden, input#x-control.param.x-control-ui.hidden, div.y-control-ui.hidden, input#y-control.param.y-control-ui.hidden] but if I change *= to $=, using the [attribute$="value"] selector, then no elements are selected:

document.querySelectorAll("[class$='-control-ui']") NodeList [] even though though both classnames end in control-ui.

The same behaviour is observed in up-to-date Chrome and Firefox. I have checked the docs in MDN and consulted other sources, and all seem to indicate that the $= operator should select elements whose specified attribute (in this case, class) ends with the given text.

I have tried modifying the selector in various ways, to no avail. What am I missing?


Источник: https://stackoverflow.com/questions/780 ... s-expected