javascript: querySelector containing @ symbol is invalid

October 12, 2023

I have an element with a className containing an @ symbol.
Such as <div class="modify@s">

I can easily style this via a css selctor such as .modify\@s

But I can’t use this selector to target the element via querySelector in javascript.

document.querySelector('.modify@s') 
document.querySelector('.modify\@s')

‘… is not a valid selector"

How can I select this element by its specify className?‘

Below a demo to play around with presenting the issue.

// this could be wrapped in a media query, so the @s reflects the mediaquery
.modify\@s {
  background: red;
}

<div class="baseClass">BaseClass nothing special here</div>
<div class="baseClass modify@s">Modify with background</div>

<button onclick="document.querySelector('.modify@s').style.border = '3px solid blue';">select modify element and add border (causes error in console)</button>
 <button onclick="document.querySelector('.modify\@s').style.border = '3px solid blue';">select modify element (with escaped @) and add border  (causes error in console)</button>

>Solution :

The @ is valid in a class name but needs to be escaped in CSS (I presume that’s to avoid clashes with at-rules). But it turns out the escape symbol used by CSS (\) is the same as the escape symbol used by JavaScript. That means you need to escape it twice.

// this could be wrapped in a media query, so the @s reflects the mediaquery
.modify\@s {
  background: red;
}

<div class="baseClass">BaseClass nothing special here</div>
<div class="baseClass modify@s">Modify with background</div>

<button onclick="document.querySelector('.modify\\@s').style.border = '3px solid blue';">select modify element and add border (no longer causes error in console)</button>