<ul>
<li class="a">A</li>
<li class="b">B</li>
</ul>
ul { display: flex; }
.a { order: 2; }
.b { order: 1; }
/* HTML は a, b の順でも、表示は b, a になる */
- flex / grid の子要素の表示順を決める。値が小さい順に並び、同じ値なら HTML の順
- 既定値は
0。負の値も使える - 変わるのは見た目の順番だけ。Tab 移動やスクリーンリーダーは HTML の順のまま
- 2015年9月から全ブラウザで使える
:has(input:checked)と組み合わせると、JS なしで並び順を切り替えられる- CSS と JS の使い分け
- 見た目だけ変えるなら CSS。JS の実行を待たずに効き、コードも少ない
- 意味や中身が変わるなら JS（DOM の順番、データ取得）
- 順番そのものに意味があるなら、
orderではなく JS で DOM を並べ替える