65906


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

* * *

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

[code]

    <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>
    
[/code]

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

* * *

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

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


CC BY-SA 4.0
2020-04-23T22:58:16.877
65904
2020-04-24T01:09:00.990
7886
question
css
「display:flex;」の「orderプロパティ」適用後の要素順に対して、「:first-child」を適用することは出来ますか？


いいえ、不可能です。なぜならば、 `:first-child` 疑似クラスが **DOM の順序**
を基準に要素を選択する[[1]](https://drafts.csswg.org/selectors-3/#nth-child-pseudo)のに対して、
`order` プロパティは **視覚上の順序** にのみ影響を及ぼす[[2]](https://drafts.csswg.org/css-
flexbox-1/#order-accessibility)ためです。

> ### 6.6.5.2. :nth-child() pseudo-
> class[[1]](https://drafts.csswg.org/selectors-3/#nth-child-pseudo)
>
> 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 を用いる必要があります。

[code]

    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");
    });
[/code]

[code]

    section {
      display: flex;
    }
    
    div {
      background: #ffa;
      width: 100px;
      height: 100px;
    }
    
    .first {
      margin-left: 1rem;
      background: red;
    }
    
    .last {
      margin-right: 1rem;
      background: blue;
    }
[/code]

[code]

    <section>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </section>
[/code]


CC BY-SA 4.0
2020-04-24T01:09:00.990
65906
2020-04-24T01:09:00.990
2020-06-17T08:14:45.997
-1
32986
65904
answer