

`flex-wrap`で複数の行ができた時、それぞれの行の1列目の要素を選択したいのですが、どのような方法がありますか？  
できれば擬似クラス(pseudo-class)があると良いのですが、無さそうだったので。

以下のサンプルではaとcにのみスタイルを適用したいと考えてます。

[code]

    #outer {
      display: flex;
      flex-wrap: wrap;
      width: 29px;
      border: 1px solid black;
    }
    
    #outer div {
      width: 10px;
      border: 1px solid gray;
    }
[/code]

[code]

    <div id='outer'>
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    </div>
[/code]


CC BY-SA 3.0
2017-05-27T12:51:50.463
35071
2019-12-09T07:54:26.957
3974
question
css
CSSのflex-wrapで1列目の要素のみを選択する方法は？


flex コンテナと flex アイテムのサイズが固定で、どの要素が一列目になるのかが明確な場合は、単純に [`:nth-of-
type`](https://drafts.csswg.org/selectors-3/#nth-of-type-pseudo), [`:nth-
child`](https://drafts.csswg.org/selectors-3/#nth-child-pseudo)
擬似クラスを用いて選択することが出来ます。

[code]

    #outer {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 50vh;
      background: gray;
    }
    
    #outer div {
      flex-basis: 50%;
      background: lightgreen;
    }
    
    #outer div:nth-child(odd) {
      box-sizing: border-box;
      border: dotted red;
    }
[/code]

[code]

    <div id="outer">
      <div>a</div>
      <div>b</div>
      <div>c</div>
      <div>d</div>
    </div>
[/code]

そうでない場合、現在でも CSS では不可能です[1]。以下のスニペットに書いたように、 JavaScript を使う必要があります。

[code]

    const onResize = () => {
      const item = [...document.querySelectorAll("#outer > div")];
      let prev;
      const first = item.filter(e => {
        const top = e.getBoundingClientRect().top;
        if (typeof prev == "undefined" || top != prev) {
          prev = top;
          return true;
        }
        e.classList.remove("first-column");
      });
      first.map(e => e.classList.add("first-column"));
    };
    onResize();
    window.addEventListener("resize", onResize);
[/code]

[code]

    #outer {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 50vh;
      background: gray;
    }
    
    #outer div {
      flex-basis: 100px;
      background: lightgreen;
    }
    
    .first-column {
      box-sizing: border-box;
      border: dotted red;
    }
[/code]

[code]

    <div id="outer">
      <div>a</div>
      <div>b</div>
      <div>c</div>
      <div>d</div>
      <div>e</div>
    </div>
[/code]

* * *

[1]: [いつか出来るようになるかもしれない](https://github.com/w3c/csswg-drafts/issues/1943)


CC BY-SA 4.0
2019-12-09T07:54:26.957
61261
2019-12-09T07:54:26.957
32986
35071
answer