from the docs http://extjs.com/deploy/ext/docs/output/Ext.DomQuery.html:
# E:not(S) an E element that does not match simple selector S
# E:has(S) an E element that has a descendent that matches simple selector S
# E:next(S) an E element whose next sibling matches simple selector S
# E:prev(S) an E element whose previous sibling matches simple selector S
so we have the following html:
<html>
<head></head>
<body>
<div class="foo">
<span>Ext rocks</span>
</div>
<div>
<span class="bar">Ext rocks</span>
</div>
</body>
</html>
Ext.query("div:not(.foo)") // this would give us the second div in an array
Ext.query("div:has(.bar)") // this would give the second div
Ext.query("span:next(.bar)") // this would give the first span
Ext.query("div:prev(.foo)") // this would give the second div
edit:
I've made some changes in the DOM structure has the :next selector wasn't working :D
<html>
<head>
<script type="text/javascript" src="../ext/yui-utilities.js"></script>
<script type="text/javascript" src="../ext/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<style>
.foo{
background-color:red;
}
.bar{
background-color:yellow;
}
</style>
</head>
<body>
<div class="foo">
div with a foo class
<span>span with no class</span>
<span class="bar">span with bar class</span>
<span class="foo">span with foo class</span>
</div>
<div>
div with no class
<span class="bar">span with bar class</span>
</div>
<script>
Ext.onReady(
function(){
console.log(Ext.query("div:not(.foo)")); // this would give us the second div in an array
console.log(Ext.query("div:has(.bar)")); // this would both divs
console.log(Ext.query("span:next(.bar)")); // this would give the first span
console.log(Ext.query("div:prev(.foo)")); // this would give the second div
}
);
</script>
</body>
</html>