Geek Answers Handbook

Choose a class that does not start with a string

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

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

So, if the internal .well also contains a class like z-depth-1 , it will not be selected.

This does not work, because the internal .well is always selected:

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

Is it possible?

+7
css css-selectors
source share
2 answers

You cannot select a child that does not contain a class starting with z-depth- using CSS , you can:

  • Select all children, class attribute values ​​do not start with 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>
  1. Select all children, class attribute values ​​do not contain the z-depth- :

 .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 can also read more about all CSS selectors on MDN .

+5
source share

You 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 great reference on how to use attribute selectors.

+2
source share

More articles:


All Articles