CSS selector for something not inside something else

Answer 1

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;
}

    

        

            

                This should not be selected
            
        
    


    

        This should be selected
    


    This should not be selected