I am writing software that has to work with the dom of a third-party web-app that I don't control. Some of the class names have parameter, eg class="view_box(200px)". I'm guessing these class names are Sass/Less mixins/arguments?

document.querySelector doesn't seem to like .view_box(200px) as a valid class selector, and simply querying .view_box doesn't return any of the elements that have the full string with argument as their class.

I tried escaping the parens as \( and \). I even tried URL encoding them as %28 and %29. I get the error Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.view_box(200px)' is not a valid selector.

I am writing software that has to work with the dom of a third-party web-app that I don't control. Some of the class names have parameter, eg class="view_box(200px)". I'm guessing these class names are Sass/Less mixins/arguments?

document.querySelector doesn't seem to like .view_box(200px) as a valid class selector, and simply querying .view_box doesn't return any of the elements that have the full string with argument as their class.

I tried escaping the parens as \( and \). I even tried URL encoding them as %28 and %29. I get the error Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.view_box(200px)' is not a valid selector.

• javascript
• css

Share Improve this question Follow asked Dec 22, 2018 at 6:58 V. RubinettiV. Rubinetti 1,7752020 silver badges2525 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

You need to pass a literal backslash into the argument:

document.querySelector(".view_box\\(200px\\)")