A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

:text selector to match elements whose text node is non-empty

Nick_Gard
2021-12-30

The problem I’m trying to solve is adding a text backplate (a background color) to elements that have text while not applying it unnecessarily to elements without text. Doing this would ensure a sufficient text contrast for elements that overlay images.

I’d love to be able to write

:text {
  background-color: var(--backplate-color);
}
simevidas
2022-01-04

Could you work with the :empty selector?

Nick_Gard
2022-01-04

The :empty selector takes element children into account, not just text node children. So writing :not(:empty) would match every node that has children even if those children are eventually empty. (For example, it would match both the htmland body elements.)

Nick_Gard
2022-01-04

I think using the :has selector could help determine if a node is a leaf node, meaning it doesn’t have element children.

:not(:has(> *)):not(:empty) should match leaf nodes that have text.

simevidas
2022-01-10

Not just text, any content (incl. whitespace), but not CSS text (::before).