0

Me encuentro con la siguiente situación: creo con JavaScript un numero variable de elementos cuya clase es order-${incrementar++} la regla CSS para esta clase de ve tener esta lógica: para order-1:

.order-1{
 order: 1;
}

para order -2:

.order-2{
 order: 2;
}

y así sucesivamente. Quiero dar solución a este problema solo con CSS, una solución que he encontrado es usar attr() de CSS, pero no funciona como puede ver a continuación:

.container{
 display:flex;
}

.order{
 order: attr(data-order);
 padding: 5px;
}
<div class="container">
  <div data-order="3" class="order">ultimo</div>
   <div data-order="2" class="order">intermedio</div>
    <div data-order="1" class="order">primero</div>
</div>

Esto debería funcionar pues en MDN se dice que atrr() es valida para todas las propiedades CSS. Si hace funcionar atrr() en order, es la solución a esta cuestión. Pero si también se puede dar solución a esta cuestión con otra técnica CSS, su ayuda es bienvenida. Gracias de antemano.

Update

Despues de investigar mas sobre attr() de CSS, me doy cuenta de que ya no esta soportada por los navegadores.

.background {
  background-color: red;
}

.background[data-background] {
  background-color: attr(data-background color, red);
}
<div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</div>

2
  • Hummm... te suena el atributo style?, creo que pasa eso esta pensado.
    – John
    el 11 may. 2022 a las 15:34
  • 1
    Si eso funciona, al generar los elementos html con javascript hago element.style=order: ${incrementar++} . Los elementos se ordenan. No me gusta este metodo por que el atributo style tiene prioridad sobre los estilos de clases. si en algun momento creara una clase order especifica para un elemento, esta quedaria anulada por los estilos en style. Por esta razon busco una solucion con clases CSS
    – Usiel
    el 11 may. 2022 a las 15:40

1 respuesta 1

1

Esto es lo que te puedo mostrar que funciona, algo pasa con la implementación de atrr() que por el momento solo funciona con content y en pseudoclases, parece que no esta 100% implementado

.demo{
     width:var(--w );
     height:var(--h );
     margin: 5px;
   
      display:block;
      background:green;  
   }
<div class="demo" style="--w:200px;--h:100px;">
  prueba 1
</div>
<div class="demo" style="--w:300px;--h:100px;">
  prueba 2
</div>

espero pueda serte de ayuda.

no hay que olvidar que esta es una implementación relativamente nueva referencia: https://www.w3.org/TR/css-values-3/#attr-notation

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.