Как применить стиль "последний ребенок" к элементу: last-child?

Question

Как применить последний дочерний стиль к элементу :last-child ?

Есть ли способ указать в html, что это :last-childдаже если это не так?

Примерно так:

<ul>
  <li></li>
  <li class="last-child"></li>
  <li></li>
</ul>

Или вот это:

<ul>
  <li></li>
  <li last-child></li>
  <li></li>
</ul>

То же самое для :first-child и :selected.

Answer 1

Вы можете воспользоваться свойством order, которое поставляется вместе с Flexbox / Grid :

ul {
  display: flex; /* displays flex-items (children) inline */
  flex-direction: column; /* stacks them vertically */
}

ul > li:nth-child(2) {
  order: 1;
}

ul > li:last-child { /* or "> .last-child" */
  border: 1px solid;
}

<ul>
  <li>First child</li>
  <li>Second child</li>
  <li class="last-child">Last child but not displayed last!</li>
</ul>

По умолчанию для свойства order установлено значение 0, поэтому, присваивая ему значение 1 Я размещаю это после всех остальных;поэтому здесь я нацеливаюсь только на «второго ребенка» , чтобы сделать код максимально коротким / чистым / оптимальным ;Я также мог бы нацелиться на :last-child, задав ему значение 1, но тогда мне также нужно было бы нацелиться на " second child ", задав ему значение 2 для достижениятот же результат, что и сейчас, но нам не нужно использовать свойство order дважды, так как достаточно одного раза, в данном случае ...

Answer 2

Вы можете использовать это

#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    width: 70px;
    height: 70px;
}

/* Safari 6.1+ */
div#myRedDIV   {-webkit-order: 2;}
div#myBlueDIV  {-webkit-order: 4;}
div#myGreenDIV {-webkit-order: 3;}
div#myPinkDIV  {-webkit-order: 1;}

/* Standard syntax */
div#myRedDIV   {order: 2;}
div#myBlueDIV  {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV  {order: 1;}

<div id="main">
  <div style="background-color:coral;" id="myRedDIV"></div>
  <div style="background-color:lightblue;" id="myBlueDIV"></div>
  <div style="background-color:lightgreen;" id="myGreenDIV"></div>
  <div style="background-color:pink;" id="myPinkDIV"></div>
</div>