How to apply a :not selector and all its descendants

Question

I'm using a text editor plugin with its own styles but inside I'm rendering a Mapbox map. The problem is that the editor's styles are messing up Mapbox's.

The text editor styles are in arx-content-custom.scss and this is how I'm using them:

#association-content-row {
  @import 'arx-content-custom';
}

So that it applies to the specific #association-content-row container where the editor is loaded and not the entire page.

I tried excluding the Mapbox element like this:

#association-content-row :not(.mapboxgl-map) {
  @import 'arx-content-custom';
}

But the styles keep getting applied to the map. What can I do?

edit: let me provide some HTML to exemplify my case.

I have a container with many descendants. I'd like to apply arx-content-custom.scss styles to these. But .mapboxgl-map is also within #association-content-row so styles are getting applied and overriding the way some elements in the map looks, like links, buttons, spacing... I'd like to exclude .mapboxgl-map and all its descendants from the scope where those arx-content-custom styles are getting applied.

<div id="association-content-row">
    <div class="row1">
        <div>
            <button></button>
            <input type="text">
        </div>
    </div>
    <a href=""></a>
    <div class="mapboxgl-map">
        <div>
            <button></button>
        </div>
    </div>
    <div class="row2"></div>
    <form action="" class="myform"></form>
</div>

For instance, arx-content-custom styles should apply to the button within .row1 but not the button in the map.

Answer 1

You haven't provide enough information to say what's the problem (i.e., no HTML). I will try and guess what could be the problem. I doubt it's SCSS (i.e., @import) that is causing this, I think it's your HTML structure.

1. If you have an HTML structure like this:

<div id="parent">
  <div id="a">A</div>
  <div id="b">B</div>
  <div id="c">C</div>
</div>

WRONG:

#parent:not(#a) {
  background-color: red;
}

RIGHT:

#parent :not(#a) {
  background-color: red;
}

RIGHT:

#parent > :not(#a) {
  background-color: red;
}

2. If you have an HTML structure like this:

<div id="association-content-row" class="mapboxgl-map">first</div>
<div id="association-content-row">second</div>
<div id="association-content-row">third</div>

WRONG:

#association-content-row :not(.mapboxgl-map) {
  background-color: blue;
}

RIGHT:

#association-content-row:not(.mapboxgl-map) {
  background-color: blue;
}

Let me know if this is helpful.

---

EDIT:

#association-content-row > :not(.mapboxgl-map) {
  background-color: yellow;
}

<div id="association-content-row">
  <div class="row1">
    <div>
      <div>APPLY</div>
    </div>
  </div>
  <div class="mapboxgl-map">
    <div>
      <div>DO NOT APPLY</div>
      <div>
        <div>DO NOT APPLY</div>
      </div>
    </div>
    <div>DO NOT APPLY</div>
  </div>
  <div class="row2">APPLY</div>
</div>