Multiple descendant children selector with css [duplicate]

Answer 1

The not(.bbb) will match any div without the class .bbb and you have a lot of them between .aaa and .ccc that why the text is red. To do what you want you need to consider two selectors

.aaa .ccc {
  font-size: 20px;
  color: #FF0000;
}
/*we reset the style if children of .bbb*/
.bbb .ccc {
  color: initial;
  font-size:initial;
}

<div class="aaa">

  <div>

    <div>

      <div class="bbb">

        <div>

          <div>

            <div class="ccc">AQUI</div>

          </div>

        </div>
      </div>

    </div>

  </div>

</div>

Answer 2

There are actually elements which are not .bbb - the two divs before and after .bbb in this case. For this to work, you'll need to be more specific. You can add another class (zzz in the example), and if this class is not combined with .bbb the rule will be applied.

.aaa .zzz:not(.bbb) .ccc {
  font-size: 20px;
  color: #FF0000;
}

<div class="aaa">
  <div>
    <div>
      <div class="zzz bbb">
        <div>
          <div>
            <div class="ccc">AQUI</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

You have overlooked that the .ccc is a child of components that match :not(.bbb):

<div class="aaa">
  <div class="ccc"></div>
  <div class="bbb">
    <div> // <-- :not(.bbb)
      <div class="ccc"></div>
    </div>
  </div>
</div>

You need to write two rules:

.aaa .ccc {
  color: blue;
}

.aaa .bbb .ccc {
  color: red;
}