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.