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