Alternative for child combinator css

Question

I'm working with VTEX and when I use npm run watch, which builds my app, converts scss into css, I cannot use some of css selectors like ( link to documentation ):

• Type/tag selectors (e.g. div, span)
• Combinators such as >, + and ~
• :nth-child with numbers
• Attribute selectors excepting [data-...] (e.g. [class~="mb8 b--red"]
• :global selector for classes that are not CSS Handles from other apps (i.e., that do not begin with, for example, vtex-...);

So I was wondering if there is an alternative for child combinator > to use with SCSS

Answer 1

As I know there's no other way in CSS: https://www.w3schools.com/css/css_selectors.asp

Suggestion 1: using :not (thanks to @hao-wu)

div{
  background-color: cyan;
}

.parent div:not(.parent div div) {
  background-color: red;
}

<div class="parent">
  <div>
    Child 1
    <div>Grandchild 1</div>
    <div>
      Grandchild 2
      <div>Grandchild 3</div>
    </div>
  </div>
  <div>
    Child 2
    <div>Grandchild 4</div>
  </div>
</div>

Suggestion 2: a trick by using the space combinator in two rules.

div{
  background-color: cyan;  
}

.parent div{
  background-color: red;
}

.parent div div{
  background-color: cyan; /* previous value */
}

<div class="parent">
  <div>
    Child 1
    <div>Grandchild 1</div>
    <div>
      Grandchild 2
      <div>Grandchild 3</div>
    </div>
  </div>
  <div>
    Child 2
    <div>Grandchild 4</div>
  </div>
</div>