スキップ隠し要素：第一子セレクタ

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セレクタはもう使用できなくなり、スタイリングが失われます。

This gif何が起こっているかを示しています。

私の最初の取り払わは何とかそれがdisplay: noneである場合には、第1の要素をスキップし、または: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; 
}