順番指定の要素が思うようにいきません。

Question

table に指定した要素を反映させたいのですが、うまくできません。

指定したtableの中の2番目以降の要素の初めのクラスにそれぞれCSSを反映させるために
下記のコードを指定しました。

/順番指定 2番目以降tbody の中の初めの　time class だけ　paddingを上に23px 付けたい/

tbody:not(:first-child) .time:first-of-type{
padding-top:23px;
background-color:pink;
}
/順番指定 2番目以降tbody の中の初めの　price class だけ　paddingを上に23px 付けたい/
tbody:not(:first-child) .price:first-of-type{
padding-top:23px;
background-color:pink;
}
すると、not(:first-child) の指定だけ効いていると思うのですが、

2番目以降の初めの　time 　class だけなく　2番目以降の全ての　time　class に　css が反映されてしまいます。

また、
tbody:not(:first-child) .price:first-of-type
こちらの指定は効いていないように見えます。

どのように直せばよいのでしょうか？

下記がコードにになります。

<table class="menu-list-facial">
  <tbody>
<tr>
  <td class="menu" rowspan="4">
    <h3 class="parts-title">小顔フェイシャル</h3>

  </td>
</tr>
<tr>
  <td class="time">60分</td><td class="price">&yen;3,000</td>
</tr>
<tr>
<td class="time">90分</td><td class="price">&yen;5,000</td>
</tr>
<tr>
<td class="time">120分</td><td class="price">&yen;7,000</td>
</tr>
</tbody>
  <tbody>
  <tr>
    <td class="menu" rowspan="3">
      <h3 class="parts-title">小顔矯正</h3>

    </td>
  </tr>
  <tr>
    <td class="time">60分</td><td class="price">&yen;9,000</td>
  </tr>
  <tr>
  <td class="time">90分</td><td class="price">&yen;12,000</td>
  </tr>
</tbody>
<tbody>
     <tr>
      <td class="menu" rowspan="3">
        <h3 class="parts-title">プラズマシャワー</h3>

      </td>
    </tr>
    <tr>
      <td class="time">30分</td><td class="price">&yen;6,000</td>
    </tr>
    <tr>
    <td class="time">60分</td><td class="price">&yen;10,000</td>
    </tr>
</tbody>
    </table>

/*-------------------------------------------
menu
-------------------------------------------*/

tbody{
  border-bottom:1px dotted #000;
}

  #menu .parts .reserve-box{
    padding:40px 0;
  }




/*facial*/

 .menu-list-facial .menu{
  width:80%;
  padding-bottom:13px;
  margin-top:20px;
  vertical-align: top;
}
 .menu-list-facial .time{
  width:10%;
  padding-bottom:13px;
  margin-top:20px;
  text-align:right;

}
 .menu-list-facial .price{
  width:10%;
  padding-bottom:13px;
  margin-top:20px;
  text-align:right;

}
/*順番指定 2番目以降tbody の中の初めの　time class だけ　paddingを上に23px 付けたい*/

tbody:not(:first-child) .time:first-of-type{
  padding-top:23px;
  background-color:pink;
}
/*順番指定 2番目以降tbody の中の初めの　price class だけ　paddingを上に23px 付けたい*/
tbody:not(:first-child) .price:first-of-type{
  padding-top:23px;
  background-color:pink;
}

試した事、　nth-of-type から　nth-child に変更

色をつけて　css の反映範囲確認

nthを使わずに　検証ツールから直書き

Answer 1

2番目以降の初めの　time 　class だけなく　2番目以降の全ての　time　class に　css が反映されてしまいます。

:first-of-type の type というのはタグ名のことです。「timeクラスの1番目」という意味ではありません。time クラスは <tr>の最初の子<td> すべてに付いているので、すべてにマッチします。

tbody:not(:first-child) tr:nth-of-type(2) .time {

でしょうか。

---

tbody:not(:first-child) .price:first-of-type
こちらの指定は効いていないように見えます。

こちらも同様で、priceクラスは2番目の子<td>についているので、マッチすることはありません。
同様に、tr:nth-of-type(2) を使いましょう。

Comments

[niconic73027793]

回答ありがとうございます。
tbody:not(:first-child) tr:first-of-type .time
こちらに変更したのですが , 今度はcssが反映されなくなってしまいました。

tbody:not(:first-child) tr:first-of-type .time {
padding-top:23px;
background-color:pink;
}

[int32_t]

おっと、失礼しました。2番めの <tr> なんですね。 tr:nth-of-type(2) ですね。

[niconic73027793]

#menu tbody:not(:first-child) tr:first-of-type .menu,
#menu tbody:not(:first-child) tr:nth-of-type(2) .time,
#menu tbody:not(:first-child) tr:nth-of-type(2) .price
{
padding-top:23px;
}

このように書いたらできました。

1番目のtbody 以外の　　tbody:not(:first-child) は良いのですが、
2番目以降の 初めの　time クラスと　初めの　priceに　cssを適用させたいので
tr:first-of-type .time
tr:first-of-type .price
でよいかとおもいましたが、なぜ
tbody:not(:first-child) tr:nth-of-type(2) .time,
tbody:not(:first-child) tr:nth-of-type(2) .price
これで初めの　timeと　priceに適用されているか謎です。

[int32_t]

最初のtimeとpriceが2番めの子<tr>に含まれているからです。

[niconic73027793]

理解できました