Вопрос по flexbox, css – CSS: выберите последний заказанный flex детей

8

Дано произвольное число детей flexbox со встроеннымorder атрибут, используемый для сортировки, как выбрать последний упорядоченный элемент в CSS?

<ul style="display:flex">
  <li style="order: 4">a</li>
  <li style="order: 5">b</li>
  <li style="order: 3">c</li>
  <li style="order: 1">d</li>
  <li style="order: 2">e</li>
</ul>

:last-of-type не работает на гибких детях, и список может бытьлюбой длина, поэтому выбор по индексу заказа не вариант. Я не заинтересован в решениях JavaScript.

связанные с:stackoverflow.com/q/35355253/3597276 Michael_B
вам нужен javascript для проверки значений заказа, CSS не сделает этого :( G-Cyr

Ваш Ответ

2   ответа
2

Единственное близкое решение этого может быть

div[style="order: 6"] {
    background-color: yellow;
}

И это закрасит фон желтым для 6-го порядка, но, поскольку мы не знаем длину массива, похоже, вам понадобится какой-нибудь javascript или jQuery с аналогичным синтаксисом селектора, где число 6 в этом случае будет переменная с длиной массива.

Да, может быть, я должен предложить:first-order, :last-order, :nth-order в рабочую группу;) silverwind
1

нтам div (display: flex), чтобы = order: проверил. Следовательно, .wrapper div: last-child должен сделать свое дело.

уверены ли вы ?codepen.io/anon/pen/ZGzLer последний потомок остается тем из DOM, а не переупорядоченным .so: first-type, nth-last-of-type (x), ...;) G-Cyr
Обновил пример silverwind
Да, я подразумевалdisplay:flex Родитель. Все еще позор, это не возможно от одного только css. silverwind
Я думаю ты прав. Не работает с CSS. Должен ли я отредактировать свой ответ? designarti

Похожие вопросы