1

やりたいこと
「display:flex;」の「orderプロパティ」適用後の要素に対して「:first-child」を適用したい
※orderプロパティはランダムに割り振る


「orderプロパティ」適用前
「:first-child」は期待通り動作している

<style>
  section{display:flex;}
  div{0 0.5rem;}
  div:first-child{margin-left:1rem;}
  div:last-child{margin-right:1rem;}
</style>

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

「orderプロパティ」適用後
「orderプロパティ」をランダムに割り振ると、「:first-child」の位置そのものもランダムに移動してしまう


試したこと
「:first-child」記述を、最後に記述すれば、「orderプロパティ」適用後の要素に対して「:first-child」を適用できるかと思いましたが、期待した通り動作しませんでした

質問
「display:flex;」の「orderプロパティ」適用後の要素順に対して「:first-child」を適用することは出来ますか?

1 件の回答 1

3

いいえ、不可能です。なぜならば、 :first-child 疑似クラスが DOM の順序を基準に要素を選択する[1]のに対して、 order プロパティは視覚上の順序にのみ影響を及ぼす[2]ためです。

6.6.5.2. :nth-child() pseudo-class[1]

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n. It is not required to have a parent. For values of a and b greater than zero, this effectively divides the element's children into groups of a elements (the last group taking the remainder), and selecting the bth element of each group.

もし flex アイテムの数が判明しており、それが増減しない場合には、属性セレクタにより order プロパティの順番に応じた装飾が CSS のみで可能です。しかし、アイテムの数が増減する場合には、 JavaScript を用いる必要があります。

document.addEventListener("click", () => {
  const item = document.querySelectorAll("section > div");
  const rand = [...Array(item.length).keys()].map(e => e + 1).sort(() => Math.random() - 0.5);

  item.forEach(e => (e.style.order = rand.shift()) && (e.dataset.order = e.style.order) && (e.classList.remove("first", "last")));
  
  document.querySelector(`div[data-order="1"]`).classList.add("first");
  document.querySelector(`div[data-order="${item.length}"]`).classList.add("last");
});
section {
  display: flex;
}

div {
  background: #ffa;
  width: 100px;
  height: 100px;
}

.first {
  margin-left: 1rem;
  background: red;
}

.last {
  margin-right: 1rem;
  background: blue;
}
<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

1
  • なるほど、「orderプロパティ」は、DOM順序とは切り離して考えるべきものなのですね。また、コード作成いただきありがとうございます。「...」を検索してみて初めて「スプレッド構文」なるものが存在していることを知りました。また、これまでdatasetプロパティを使用したことがなかったため、使い方等も参考になりました
    – re9
    Commented 2020年4月24日 10:54

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。