css, 3 months ago

@simevidas Probably not simple but useful: https://css-tip.com/number-elements-has-selector/

Actually, if you use them a lot they become simple.

simevidas, 3 months ago (edited 3 months ago)

@css If we know that an element never contains text node children, then :not(:has(*)) can be used as an alternative to :blank that ignores white space. I guess that can be useful.

edit: I meant :empty, not :blank.

ollicle, 3 months ago

@simevidas @css or more simply with :empty? https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

simevidas, 3 months ago

@ollicle @css My mistake. :blank is for inputs. I meant :empty. :empty is defined to ignore white space in the newest spec, but the way it’s implemented in browsers, it doesn’t match in that case.

ollicle, 3 months ago

@simevidas @css ignoring white space is a welcome and useful change!

simevidas, 3 months ago

X:not(:has(:not(Y))):has(Y) = X that contains only Y

Is this a good pattern? Should I add it to the above list?

AmeliaBR, 3 months ago

@simevidas Ooof. That would definitely always require a comment to explain it & prevent someone (maybe yourself) from bungling it up in the future.

Definitely not for a list of "simple" :has selectors, but perhaps sometimes valid? Something like:

:is(ul, ol):not(:has(> :not(li))
/* find and flag any list that has non-list-item direct children */

simevidas, 3 months ago (edited 3 months ago)

@AmeliaBR I misremembered the terminology (https://drafts.csswg.org/selectors/#structure). What I meant is compound, not simple. I wanted to exclude complex selectors (e.g., X:has(Y) Z) to keep the list short.