1

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

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

#outer {
  display: flex;
  flex-wrap: wrap;
  width: 29px;
  border: 1px solid black;
}

#outer div {
  width: 10px;
  border: 1px solid gray;
}
<div id='outer'>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</div>

4
  • #outer div:nth-child(1)
    – yyz
    2017年5月27日 13:18
  • @yyz それだとcは選択されませんよね
    – packet0
    2017年5月28日 4:00
  • 言葉足らずで申し訳ない 私は aとc のセレクターをカンマで連結して定義してます。 #outer div:nth-child(1),#outer div:nth-child(3) {border: 1px solid #1b92ff;}
    – yyz
    2017年5月28日 7:03
  • 1
    表示列数が2列固定なら、#outer div:nth-child(2n+1)で良いみたいです。 動的に変化させるにはjavascriptで制御することになると思います。
    – yyz
    2017年5月28日 7:44

1 件の回答 1

1

flex コンテナと flex アイテムのサイズが固定で、どの要素が一列目になるのかが明確な場合は、単純に :nth-of-type, :nth-child 擬似クラスを用いて選択することが出来ます。

#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;
}
<div id="outer">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
</div>

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

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);
#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;
}
<div id="outer">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
</div>


[1]: いつか出来るようになるかもしれない

1
  • 1
    念のためコメントしておきますが、二つ目のコードスニペットは一列目の要素を選択する場合のコードです。二列目の要素を選択するためには、もう少しコードに手を加える必要があります。
    – supa
    2019年12月10日 14:12

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

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