Is there a CSS selector for elements containing certain text?

Question

I am looking for a CSS selector for the following table:

Peter    | male    | 34
Susanne  | female  | 12

Is there any selector to match all

Answer 1

You could also use content with attr() and style table cells that are :not :empty:

th::after { content: attr(data-value) }
td::after { content: attr(data-value) }
td[data-value]:not(:empty) {
  color: fuchsia;
}

  

    

    
​
    

  
  

    

    

    

  
  

    

    
​
    

  

A ZeroWidthSpace is used to change the color and may be added using vanilla JavaScript:

const hombres = document.querySelectorAll('td[data-value="male"]');
hombres.forEach(hombre => hombre.innerHTML = '​');

Although the s end tag may be omitted doing so may cause it to be treated as non-empty.