CSS selector for something not inside something else - html

Question

I have some nested elements like this:
<div class="foo">
<div class="select-inside-this">
<div class="not-inside-this">
<div class="one select-this"></div>
</div>
</div>
</div>
<div class="select-inside-this">
<div class="two select-this"></div>
</div>
<div class="three select-this"></div>
I want to select all .select-this which are inside .select-inside-this but not those which are wrapped in .not-inside-this. So in the end, i should be able to select only two.select-this from the above code.
The CSS I've tried but did not work:
.select-inside-this :not(.not-inside-this) .select-this {
/* style here /*
}
or:
.select-inside-this *:not(.not-inside-this) .select-this {
/* style here /*
}
Any workaround here?
I don't want to use JavaScript here. I need pure CSS3 solution.
EDIT: I don't want to use direct child (>) selector. As I've asked, I want to select all those element from any level just without the exception wrapper.

Answer 1

:not(.not-inside-this) and *:not(.not-inside-this) with the * are equivalent; in the case of the former, the universal selector is implied. See the spec.
It is currently not possible to construct a CSS selector that matches elements that are not descendants of specific elements for the reasons given in the following questions:
CSS negation pseudo-class :not() for parent/ancestor elements
Is the CSS :not() selector supposed to work with distant descendants?
The selector
.select-inside-this :not(.not-inside-this) .select-this
matches .select-this elements that are descendants of some element that is not .not-inside-this, which in turn is a descendant of .select-inside-this. It does not match .select-this elements that are not descendants of .not-inside-this within .select-inside-this.
This means, first off, that your selector will incorrectly match the following:
<div class="select-inside-this">
<div class="bar">
<div class="not-inside-this">
<div class="select-this"></div>
</div>
</div>
</div>
... because one of the ancestors of .select-this, .bar, is :not(.not-inside-this).
Additionally, this implies at least three levels of nesting (though it could be more). In your example, there are no other elements between .two.select-this and its containing .select-inside-this, so it will never match that element. This is why James Donnelly suggests adding .select-inside-this > .select-this to account for that particular case.
However it is still not possible to write a single complex selector using descendant combinators to match elements without a specific ancestor. The only way is to repeat the child combinator method with as many :not(.not-inside-this) as necessary, but this requires that you account for all possible cases. If you can't do that, then you're out of luck with CSS selectors.

Answer 2

You can use the Child Combinator Selector > to specify direct children:
.select-inside-this :not(.not-inside-this) .select-this,
.select-inside-this > .select-this {
/* style here /*
}
This selects any .select-this element which is not a descendent of any .not-inside-this element and also selects .select-this elements which are direct children of .select-inside-this elements.
body > .select-inside-this :not(.not-inside-this) .select-this,
body > .select-inside-this > .select-this {
color: red;
}
<div class="foo">
<div class="select-inside-this">
<div class="not-inside-this">
<div class="one select-this">
This should not be selected
</div>
</div>
</div>
</div>
<div class="select-inside-this">
<div class="two select-this">
This should be selected
</div>
</div>
<div class="three select-this">
This should not be selected
</div>

Answer 3

A little bit late to the party, and it might not match your use case, but this is what I ended up doing:
HTML:
<div class="foo">
<div class="select-inside-this">
<div class="not-inside-this">
<div class="one select-this"></div>
</div>
</div>
</div>
<div class="select-inside-this">
<div class="two select-this"></div>
</div>
<div class="three select-this"></div>
CSS:
.select-inside-this .select-this {
background: blue;
}
.select-inside-this .not-inside-this .select-this {
background: none;
}
The trick is to positively select the negative element and just undo the style.
It'll work for simple use cases, at the very least.

Answer 4

I ended up
styling but hiding the styles by default, and then
revealing them on the nested element only.
Example with image backgrounds:
.box{
height:100px;
background-image: url("img.jpg");
background-repeat: no-repeat;
background-position: top 100px left 0; /*hide by default (here by shifting position)*/
}
.container .box{
background-position: top left; /*reveal in the nested*/
}
Hope you find a way to hide the style you need in place in a similar way.