Пропустить скрытый элемент: селектор первого ребенка

Question

Я использую Sortable.js, и у меня возникла следующая проблема:

У меня есть список элементов, которые я хочу отсортировать, и мне нужно, чтобы первый элемент был шире, чем все 3 других.

Для этого у меня есть следующий CSS:

#produto_img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#produto_img > li {
  height: 100px;
  margin: 0 5px;
}

#produto_img > li:not(:first-child) {
  flex: 1;
}

#produto_img > li:first-child {
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
}

Он отлично работает, когда я начинаю перетаскивать любой элемент после первого, даже если я переключаюсь с первым элементом, он работает нормально.

Создает следующую разметку:

Но когда я начну перетаскивать с первого раза, я потеряю стиль, потому что плагин создает другой элемент на своем месте и устанавливает его на display: none, Итак :first-child Селектор больше не будет работать, и он теряет стиль.

Этот GIF показывает, что происходит.

Моей первой мыслью было бы как-то пропустить первый элемент, если он display: noneили используйте что-то вроде :first-child:visible, но это не работает, очевидно.

Есть ли обходной путь?

Answer 1

К сожалению :visible псевдокласс все еще отличается от jQuery. Обходной путь, который вы можете использовать, хотя бы для обработки сокрытия путем добавления / удаления класса.

Тогда это вопрос переопределений

li.hidden {
    display: none;
}

li:not(.hidden) {
    width: 100%;
    height: 200px;
    margin-bottom: 10px;
}

li:not(.hidden) ~ li {
    width: auto;
    height: auto;
    margin-bottom: 0;
    flex: 1;
}