Seleccione un elemento con un atributo no vacío

Respuesta corta:

[data-foo]:not([data-foo=""]) { }

Respuesta más larga (misma conclusión, solo una explicación de por qué podríamos necesitar esto):

Digamos que tienes un elemento al que le das estilo con un especial data-attribute:

div data-highlight="product"/div

Quieres apuntar a ese elemento y hacer cosas especiales al resaltar.

[data-highlight] {  font-size: 125%; }[data-highlight="product"] img {  order: 1;}

Ese data-typeatributo es parte de una plantilla, por lo que puede tener cualquier valor que establezca.

div data-highlight="{{ value }}"/div

¡Y a veces no hay valor! Entonces el HTML de salida es:

div data-highlight=""/div

Pero esto puede resultar complicado. Vea en el primer bloque CSS anterior, queremos apuntar a todos los elementos con el data-highlightatributo, buttttt, en realidad solo queremos hacerlo si tiene un valor. Si el valor está en blanco, simplemente queremos omitir cualquier estilo especial.

En un mundo perfecto, simplemente eliminaríamos el atributo de datos de la plantilla HTML cuando no haya ningún valor. Pero muchos lenguajes de plantillas, a propósito, no permiten una lógica que nos ayudaría a poner o no ese atributo por completo.

En cambio, podemos solucionarlo con CSS:

[data-highlight]:not([data-highlight=""]) {  font-size: 125%; }[data-highlight="product"] img {  order: 1;}