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;} 





SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Seleccione un elemento con un atributo no vacío

Seleccione un elemento con un atributo no vacío

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

programar

es

https://pseint.es/static/images/programar-seleccione-un-elemento-con-un-atributo-no-vacio-1214-0.jpg

2024-06-13

 

Seleccione un elemento con un atributo no vacío
Seleccione un elemento con un atributo no vacío

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences