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?

Accepted Answer

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

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>

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.

Answer 2

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 class="z-depth-1 well">z-depth-1 well</div>
<div class="well z-depth-1">well z-depth-1</div>

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

Select Class That Does Not Begin with String

2 Answers

Must Read

Your Answer

David Miller

Select Class That Does Not Begin with String

2 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

David Miller