The selector works similarly to /deep/ - css

Question

I need a selector that will select everything in the X class, except for the Y class objects. Maybe my problem would solve the selector /deep/ but it is not supported.
I have a page structure:
<div class="x">
<div class="y"></div>
<div>
<div>
<div>
<span class="y"></span>
<div>1</div>
<label class="y"></label>
<div>
<span class="y"></span>
<p>2</p>
</div>
</div>
</div>
</div>
<div>
<span class="y"></span>
<div>3</div>
</div>
<div>
<div>4</div>
<div>
<div>5</div>
</div>
</div>
<div>6</div>
</div>
I need a selector or xpath that will select:
<div>1</div>
<p>2</p>
<div>3</div>
<div>
<div>4</div>
<div>
<div>5</div>
</div>
</div>
<div>6</div>
I need a general solution.

Answer 1

This XPath,
//div[#class="x"]//*[not(#class="y") and not(.//*[#class="y"])]
will select all div[#class="x"] descendants that do not have a #class="y" attribute and do not have any descendants that have #class="y" elements,
<div>1</div>
<p>2</p>
<div>3</div>
<div>
<div>4</div>
<div>
<div>5</div>
</div>
</div>
<div>4</div>
<div>
<div>5</div>
</div>
<div>5</div>
<div>6</div>
which matches your example if we assume that your example was incomplete.

Answer 2

There is the :has(...) pseudo-class but it cannot be used in stylesheets for performance reasons. This limitation is baked into CSS engines for all browsers because every time they render web pages, they traverse through the entire DOM and apply selectors that match the existing element (and hence haven't yet looked at their children). Instead this pseudo-class is typically used for dedicated selector engines such as Sizzle (known by its development/use for jQuery).
If you wanted to use that pseudo-class, then you could try :not(.y):not(:has(.y)). Then in order to get the topmost results, I select children only of elements that did not match (ie. :has(.y) > :not(:has(.y))). The one caveat comes if an element with class "y" has children. The only way to handle that is to repeat the pseudo-class specifying :not(.y) for as many levels deep that you want to go (I didn't do this). Here's a live example:
// The selector
var elements = $('.x > :not(.y):not(:has(.y)), .x :has(.y) > :not(.y):not(:has(.y))');
// Format the HTML
var html = elements.map(function(){
var dirty = this.outerHTML;
// Get leading whitespace to remove
var leading = (dirty.match(/\r?\n *(?= {4})/) || ['\r\n'])[0];
// Create regex to replace whitespace
var leading = new RegExp(leading.replace(/\r/,'\\r?').replace(/\n/,'\\n'), 'g');
// Show newlines, whitespace in HTML
var cleaned = $('<div>').text(dirty).html().replace(leading, '<br/>').replace(/ /g, ' ');
return cleaned;
}).toArray();
// Add the HTML to the page
var results = $('#results');
for(var i=0; i<html.length; i++) {
results.append($('<li>').html(html[i]));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Sample HTML -->
<div class="x">
<div class="y"></div>
<div>
<div>
<div>
<span class="y"></span>
<div>1</div>
<label class="y"></label>
<div>
<span class="y"></span>
<p>2</p>
</div>
</div>
</div>
</div>
<div>
<span class="y"></span>
<div>3</div>
</div>
<div>
<div>4</div>
<div>
<div>5</div>
</div>
</div>
<div>6</div>
</div>
<h3>Results</h3>
<ol id="results" class="y"></ol>