:nth-childが効かない

Question

前提・実現したいこと

画像のようなborderをつけたくて<dt>と<dd>を囲んだ<div class="company-row">にborderを指定しました。1つ目の .company-row以外にborderをつけるために .company-row:nth-child(2+n)と書いたのですが適応されませんでした。何が問題なのでしょうか？また、:first-childとは逆の、ある一つの対象以外全てを指定できる方法はないですか？

該当のソースコード

<div class="container">
       <div class="company">
      <p>Company</p>
      <dl>
        <div class="company-row">
        <dt>社名</dt>
        <dd>株式会社ファンチャーデザイン</dd>
      </div><!-- /company-row -->
      <div class="company-row">
        <dt>住所</dt>
        <dd>〒107-0062 東京都港区南青山1丁目××××××</dd>
      </div><!-- /company-row -->
      <div class="company-row">
        <dt>設立</dt>
        <dd>XXXX年XX月</dd>
      </div><!-- /company-row -->
      <div class="company-row">
        <dt>資本金</dt>
        <dd>XXXX万円</dd>
      </div><!-- /company-row -->
      <div class="company-row">
        <dt>従業員数</dt>
        <dd>XX名</dd>
      </div><!-- /company-row -->
      <div class="company-row">
        <dt>事業内容</dt>
        <dd>家具、インテリアの企画、生産<br>
        家具、インテリアの販売<br>
        店舗の企画・デザイン・設計</dd>
      </div><!-- /company-row -->
      </dl>
    </div><!-- /company -->
     </div><!-- /container -->

.company {
  padding-top: 30px;
}

.company dl {
  border-collapse: collapse;
  display: table;
}

.company-row {
  display: table-row;
}

.company dt,.company dd {
  display: table-cell;
  line-height: 1.6;
}

.company div:nth-child(2+n) {
  border-top: 1px solid rgb(186, 186, 186);
}

.company :is(p, dt, dd) {
  font-size: 14px;
}

.company dt {
  padding-right: 140px;
}

試したこと

:nth-child(2+n)を外すと全ての .company-rowにborderが適応されたので他の箇所での記述ミスはないと思います。

補足情報（FW/ツールのバージョンなど）

dynabook V72/JLE
型番:PV82JLECNRDQE

Answer 1

.company-row:nth-child(2+n)と書いた

指定順序が違います。
2+nではなくn+2です。

なので、.company-row:nth-child(n+2) と指定してください。

:first-childとは逆の、ある一つの対象以外全てを指定できる方法はないですか

特定の要素等を除外するnot疑似クラスで実現できます。

例：.company-row:not(:first-child) //.company-rowの最初の要素だけ除外

具体的な使い方は以下を参照してください。

mdn web docs / :not

Comments

[amagiri]

非常に勉強になりました、ありがとうございます！