Switching the order of LI elements with CSS only
I need to update an existing page with CSS already in place. I am NOT allowed to touch the existing HTML. My only option is to create another CSS/CSS3 codes to override the existing one. No JS. No JQuery.
Below is a sample existing HTML. My target output is to create a CSS/CSS3 code override to reverse the position, bringing the “second” class up to be the first in the order list.
I started googling about this but i couldn’t find any good resources. So I just thought that there might be a CSS3 code that could do this like the CSS Code that I imagined below:
Out of this world CSS Code:
Any suggestions will be greatly appreciated.
Fiddle here -> http://jsfiddle.net/philcyb/mL41up6t/
In this case, you could give the second element an
order value of
-1 so that it appears first.
Browser support can be found here. You tagged your question with css3, so I doubt browser support is a concern considering it is currently at about ~93.03% for flexboxes.
As a side note, you can also make use of
:nth-of-type in order to select the
li element by its index rather than using classes.