I am struggling to create a CSS Selector that follows DRY principles.
The selector needs to target elements within a group but not those within a subgroup of the main group.
Elements should only be direct children of the main group or wrapped in an additional element.
In the given DOM, the standard selector would be:
.grp.A > .el, .grp.A > * > .elTo make this more DRY, we can use: :is(.grp.A, .grp.A > *) * .el
Personally, I think the most DRY solution would look something like: .grp.A:is(*, * > *) > .el, but unfortunately, it doesn't work. Do you have any suggestions for improving this further?
console.log([...document.querySelectorAll(".grp.A > .el, .grp.A > * > .el")]);
console.log([...document.querySelectorAll(":is(.grp.A, .grp.A > *) > .el")]);
console.log([...document.querySelectorAll(".grp.A:is(*, * > *) > .el")]);<div class="grp A">
<div class="cont">
<div class="grp B">
<div class="el noooooo"></div>
</div>
</div>
<div class="el yes1"></div>
<div>
<div class="el yes2"></div>
</div>
</div>