CSS Sort

降順

プロパティ order

orderは、デフォルト0です。特定の要素に1をセットすると、最後に表示されます

例えば、全要素に2をセットしておいてから、特定の要素に1をセットすると、最初に表示されます

この例は、flex-direction row-reverseやcolumn-reverse と同じような動作ですが、

data-attributeとjquery等を使うと複雑なソートも処理できるかもしれません。

HTML

<input type="checkbox" id="sort" value="DESC" />降順

<ul class="menu">
 <li class="l1">list 1</li>
 <li class="l2">list 2</li>
 <li class="l3">list 3</li>
 <li class="l4">list 4</li>
 <li class="l5">list 5</li>
 <li class="l6">list 6</li>
</ul>

<div class="menu">
 <div class="l1">div 1</div>
 <div class="l2">div 2</div>
 <div class="l3">div 3</div>
 <div class="l4">div 4</div>
 <div class="l5">div 5</div>
 <div class="l6">div 6</div>
</div>

CSS

.menu{
 display:flex;
 flex-direction:column;
}
div.menu{
 flex-direction:row;
 flex-wrap:wrap;
}
div.menu div[class^="l"]{
 width:150px;
 text-align:center;
 padding:50px 0;
 margin:5px;
 color:#fff;
 font-weight:700;
}
div.menu div:nth-child(1){
 background:#1abc9c;
}
div.menu div:nth-child(2){
 background:#33ce74;
}
div.menu div:nth-child(3){
 background:#3498db;
}
div.menu div:nth-child(4){
 background:#9b59b6;
}
div.menu div:nth-child(5){
 background:#34495e;
}
div.menu div:nth-child(6){
 background:#e67e22;
}
input:checked ~ .menu .l6{
 -web-kit-order:1;
 order:1;
}


新着記事

コメントは受け付けていません。