Select class that does not begin with string

Question

I want to select a child element that does not contain a class that begins with z-depth-:

<div class="well">
    <div class="well"></div>
</div>

So that if the inner .well also contained a class like z-depth-1 it would not be selected.

This isn't working because the inner .well is always selected:

.well .well:not([class^="z-depth-"])

Is that even possible?

Answer 1

You can't select a child element that does not contain a class that begins with z-depth- with CSS, you can only:

1. Select all the child elements whose class attribute's values don't start from z-depth- substring:

.well .well:not([class^="z-depth-"]) {
    color: red;
}

<div class="well z-depth-1">Parent div
    <div class="z-depth-2 well">First child div</div>
    <div class="well z-depth-3">Second child div</div>
</div>

2. Select all the child elements whose class attribute's values don't contain z-depth- substring:

.well .well:not([class*="z-depth-"]) {
    color: red;
}

<div class="well z-depth-1">Parent div
    <div class="z-depth-2 well">First child div</div>
    <div class="well z-depth-3">Second child div</div>
    <div class="well">Third child div</div>
</div>

You also could read more about all CSS Selectors on MDN.