Multiple descendant children selector with css

Question

Check this code below:

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

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

I want to match all .ccc element that are children of .aaa but are not children of .bbb. It means that the code above should NOT make the AQUI word be RED, but it gets RED anyway. What am I doing wrong?

score 4 · Answer 1 · answered Sep 24 '18 at 14:02

4

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>

answered Sep 24 '18 at 14:02

Ori Drori

183,571
29
224
209

I liked a lot your idea. But why `.aaa div:not(.bbb) .ccc` does not work? I tried being more specific as you said but it looks like this is not enough. I have no access to HTML code, only the CSS file. – amandanovaes Sep 24 '18 at 14:09
Because there are other divs which don't have `.bbb` in the way. – Ori Drori Sep 24 '18 at 14:17
I am not sure if this will work in all the cases, because if you remove the div with the class `zzz bbb` you will not select the `ccc` ... your selector is like `.aaa .randomClass .ccc`, you introduced a random selector between `aaa` and `ccc` making the selection impossible – Temani Afif Sep 24 '18 at 14:17
@Ori Drori thanks a lot, your solution is indeed very nice but it demands changing HTML code which is not possible in my case. But I liked a lot your solution, thanks! Temani Afif you are right :) – amandanovaes Sep 24 '18 at 14:19

Temani Afif · Accepted Answer · 2019-05-16T00:29:44.397

2

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>

edited May 16 '19 at 00:29

answered Sep 24 '18 at 14:04

Temani Afif

245,468
26
309
415

I liked very much your solution, worked perfectly! It fitted like a glove to my case, thanks my friend. – amandanovaes Sep 24 '18 at 14:20

score 1 · Answer 3 · answered Sep 24 '18 at 14:04

1

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;
}

answered Sep 24 '18 at 14:04

KWeiss

2,954
3
21
37

Thanks for your attention, your solution also works but the Temani Afif resets the css styles (which I was not aware of the initial) and worked better. But thanks a lot! – amandanovaes Sep 24 '18 at 14:20

Multiple descendant children selector with css

3 Answers3

Linked

Related