Bracket matcher LESS


I am using this to highlight the matching bracket in HTML in my App style.less file (i.e. for every theme):

atom-text-editor::shadow  .bracket-matcher .region {
    background-color: #969FA2;
    opacity: 0.3;

The problem is, it highlights only the opposite bracket. Here my cursor is in the closing div tag:

Oddly, when the Atom app is in the background (i.e. as I type this in Chrome) it works correctly:

What did I miss here?

How does the bracket matcher work?

Isn’t there a selector with higher specificity that also targets the .region? You can check that by

  • opening the dev tools (Ctrl+Shift+I)
  • click the magnifying glass in the upper left corner of the dev tools
  • click on a .bracket-matcher .region

Then on the right appears a list of styles applied on that element, and you check if your custom style gets overridden.

Seeing as your code works with Atom in the background, maybe there’s a .bracket-matcher .region somewhere (note the .is-focused that gives it higher specificity than your rule).

Does it work when we make the rule extremely specific:

atom-text-editor::shadow .bracket-matcher .region.region.region.region.region.region.region.region.region.region.region.region.region.region.region.region.region.region.region.region.region.region.region.region.region {
    background-color: #969FA2;
    opacity: 0.3;


Therein lies my confusion; I can’t seem to inspect a BM region. If I activate a region in the editor, and click on it, no bracket matcher in the inspector:

I have found I can search for “bracket” in the inspector, and it’s in a different DOM area than the webkit inspector showed:


So, here are the 2 regions:

Inspector shows this for both:

but as you can see only one has the background color


I can’t see your selector (atom-text-editor::shadow .bracket-matcher .region) anywhere in that list in the ‘styles’ tab. Is it there if you scroll down?

I also see the !important flag is set on the background-color rule in the .bracket-matcher .region, .bracket-matcher.region which means it overrides anything that doesn’t have !important set, and things that have it set according to the standard rules. Does it work if you do this?

atom-text-editor::shadow  .bracket-matcher .region {
    background-color: #969FA2!important;
    opacity: 0.3;


I’ve tried a few ways. In the above screenshot, I removed it from styles.less and added it to my syntax theme.