左の列の左側のボーダーだけ削除する方法が知りたい

Question

前提・実現したいこと

画像のようなレイアウトの画面があるとして左の列の左側のボーダーだけ消したい場合は、どのようにCSSを指定するのが適切なのでしょうか？

該当のソースコード

該当部分のHTMLとCSSを記載致します。
※ejsを使用して書いています。

    <section class="p-product">
        <ul class="p-product__list">
            <% for(var i = 0; i < products.length; i++) { %>
                <li class="p-product__item">
                    <a href="<%= products[i]['href'] %>" class="p-product__link">
                        <img src="<%= products[i]['product'] %>">
                    </a>
                </li>
            <% } %>
        </ul>
        <a href="#" class="p-product__more">
            <p class="p-product__moreText">アイテムをもっと見る</p>
            <div class="c-arrow"></div>
        </a>
    </section>

&__item {
    display: flex;
    justify-content: center;
    border-left: 1px solid #cbcbcb;
    width: 33.3%;
    padding: 15px 0;
  }

  &__item:nth-child(n + 4) {
    border-top: 1px solid #cbcbcb;
  }

  &__item:nth-child(1),
  &__item:nth-child(4),
  &__item:nth-child(7),
  &__item:nth-child(10),
  &__item:nth-child(13),
  &__item:nth-child(16),
  &__item:nth-child(19) {
    border-left: none;
  }

今はnth-childを使い左の列だけの要素を指定してボーダーを消しています。

画面上はこのような指定でも問題はないと思いますが、今後要素が増えた場合その都度CSSの記述も増やさなければいけないという問題が出てきた為、質問させていただきました。

このような場合のCSSの適切な指定方法をご教示いただけると幸いです。
よろしくお願い致します。

Answer 1

 &__item:nth-child(1+3n)

で1,4,7,10...を指定できます。
詳しくはこちらを参考にしてください

:nth-child()
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child

Comments

[F_Yohei]

おぉー！！

&__item:nth-child(3n + 1)でできました！
ありがとうございました????