Move first <li> item to last without using order as list is dynamic using css-CodePudding

I have unordered list with list items as follows. I don't want to use order here as my list may be dynamic with more or less items.

Example:

<ul class='test'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Now i want to move the first list item to last without using order property.

CodePudding user response：

I don't see why you cannot use order even if your list is dynamic - you don't need to add an order for each item - if they share an order, they will be listed as they come in the dom - below all li will be ordered normally using 1 and the first-child will be moved to the end using 2

.test {
  display: flex;
  flex-direction: column;
}

.test li {
  order: 1;
}

.test li:first-child {
  order: 2;
}

<ul class='test'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<ul class='test'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>
<ul class='test'>
  <li>1</li>
  <li>2</li>
</ul>

CodePudding user response：

You would need to append using JS if you do not want to use CSS order

const list = document.querySelector(".test");
list.appendChild(list.querySelector("li"))

<ul class='test'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

More than one list with class list:

document.querySelectorAll("ul.test")
  .forEach(list => list.appendChild(list.querySelector("li")))

<ul class='test'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class='test'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>