Select class that does not begin with string

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

<div> <div></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?

2 Answers

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>Parent div <div>First child div</div> <div>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>Parent div <div>First child div</div> <div>Second child div</div> <div>Third child div</div>
</div>

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

You will need to combine ^= and *= to get the desired result.

.well:not([class^="z-depth-"]) { /*will ignore elements if the first class is z-depth-* */ background-color: lightgreen;
}
.well:not([class*=" z-depth-"]) { /*will ignore elements if z-depth-* is second class or later */ background-color: skyblue;
}

<div>z-depth-1 well</div>
<div>well z-depth-1</div>

Here's a nice guide on how to use attributes selectors.