How to target a selector only if it's NOT child of a specific element (so only if it's the root)
css, css-selectors
Solution
I think you might want this:
.toggle {
color: red;
font-weight: bold;
}
div *:not(.list) .toggle {
font-weight: normal;
}
Problem
I don't understand why the following code has not desired behaviour: ``` .toggle { color: red; } :not(.list) .toggle { font-weight:bold; } ``` ``` <div class="container"> <a href="#!" class="toggle">Toggle</a> <ul class="list"> <li><a href="#!">Link 1</a></li> <li> <div class="container"> <a href="#!" class="toggle">SubToggle</a> <ul class="list"> <li><a href="#!">SubLink 1</a></li> <li> <a href="#!">SubLink 2</a> </li> <li><a href="#!">SubLink 3</a></li> </ul> </div> </li> <li><a href="#!">Link 3</a></li> </ul> </div> ``` I thought that using `:not()` would result in applying "bold" only to main "Toggle" link but instead it applis "bold" to all of red ones. Why? Please, note that this code is nested with same class names, I don't want to target specific levels with different css classes, I would like to target elements only with descendant selectors and other operators Here is present also a jsFiddle to directly try.