soy Kseso y esto EsCSS

Orden inverso de elementos puro Css: 4 formas

Cuatro formas diferentes de mostrar los elementos en pantalla en el orden inverso al que aparecen en el documento. Entre otras posibles aplicaciones está el poder simular un selector CSS de precedentes.

Orden inverso de elementos puro Css: 4 formas

·Por Kseso ✎ 20
Orden inverso de elementos puro Css: 4 formas

Hay ocasiones en que quizás deseas mostrar una serie de elementos en orden inverso a como aparecen en el html. Esto es, que se dibuje primero el último que aparece en el DOM, segundo el penúltimo, tercero el antepenúltimo... y así sucesivamente hasta que el último mostrado sea el que primero escribiste en el HTML.

No se trata de numerarlos de forma inversa sólamente. Eso ya lo explicaba en el artículo Numeración inversa en Listas Ordenadas.

En esta ocasión se trata de representarlos en pantalla de forma reversa a como aparecen en el código del documento.

Esto entre otras cosas, nos permitirá simular con puro CSS un selector de precedentes. Selector que hoy por hoy no tenemos.

Orden inverso con float

La primera forma es el viejo float: right

See the Pen Reverse order: float by Kseso (@Kseso) on CodePen.

Sencillo, soporte universal y de todos conocidos.

Inconvenientes

Pese a lo anterior, y por eso va la primera, tiene una serie de particularidades que desaconsejan su uso para esta finalidad.

A las particularidades inherentes a los elementos flotados hay que sumarle:

  • En caso de que los elementos ocupen todo el ancho no hay inversión.
  • La inversión sólo se produce línea a línea de elementos. Si el grupo conforma dos o más líneas en las que se reparten los elementos el orden es de lo más caótico: 1ª línea: 2º - 1º / 2ª línea: 4º -3º y así sucesivamente.

Añade que el centrado se vuelve mucho más complejo.

Orden inverso con direction

La segunda forma forma es usar la declaración direction: rtl en el contenedor padre y revertirla en sus ítems:

See the Pen Reverse order: direction by Kseso (@Kseso) on CodePen.

Inconvenientes

Evitamos aquello que es propio de los elementos flotados: como poder usar el valor inline-block, centrar de forma menos compleja, no necesitar limpiar el float... pero se mantienen las inconsistencias al repartir en más de una línea los ítems.

Orden inverso con flexbox

Para lograr esta representación inversa una buena idea es usar el modelo de caja flexible o flexbox

See the Pen Reverse order: flexbox by Kseso (@Kseso) on CodePen.

ol { display: flex; /*flex-direction y flex-wrap */ flex-flow: row-reverse wrap-reverse; }

Al usar la propiedad flex-flow que es la forma acortada para flex-direction y flex-wrap con esos valores nos aseguramos que el orden inverso se realiza independientemente de las líneas en las que se repartan los ítems.

Así que con el flexbox no importa que los elementos ocupen una línea cada uno. También realiza la inversión.

La única pequeña desventaja es que no podremos animar estas propiedades.

Orden inverso con transform:

Las transformaciones css encierran muchas sorpresas. Y con un poco de imaginación en su uso los resultados son de lo más apropiados para algunos "imposibles Css" como ya pudiste ver en el artículo Reverse ellipsis multiline: mostrar las últimas líneas de texto con ellipsis al inicio

En esta ocasión aplicamos una rotación de 180º al padre (la lista) y la revertimos (o completamos la rotación) en los ítems. Esto tiene un resultado visual como el que ves en el siguiente pen:

See the Pen Reverse order: transform by Kseso (@Kseso) on CodePen.

Al admitir animaciones las transformaciones podemos jugar con ellas. Como ejemplo, haz :hover en el pen previo. Para ver la doble rotación he añadido un delay a los ítems.

La transformación también es válida, como el flebox, para elementos repartidos en múltiples líneas o de bloque.

Esta vez te voy a dejar a ti para que juegues con estás últimas formas aplicadas a las multicolumnas css. Creo que el uso conjunto de colunms y transform puede deparar gratas sorpresas.

Aprovecha que puedes insertar pens en los comentarios para compartir tus demos de tus formas de invertir el orden o de jugar con las transformaciones en las columnas.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso