テーブルの枠線の一部の色を変えたい[HTML5/CSS3]

Question

#質問したいこと：テーブルの一部の枠線をCSSで色変えしたいがなぜか出来ません。問題点、改善案を教えて欲しいです。

まず下記のようにHTMLを記載し、表を作成しました。

<table class="table-A">
      <caption>制作担当</caption>
      <tr>
        <th>コモモ</th>
        <td id="red_line">企画・デザイン・baserCMSテーマのベース組み込み担当</td>
      </tr>
      <tr>
        <th class="moriko">モリコ</th>
        <td>HTML/CSSコーディング担当</td>
      </tr>
      <tr>
        <th class="hirosyama">ひろしゃま</th>
        <td>プラグイン制作、テーマ実装の難しいところが担当</td>
      </tr>
</table>

次にCSSを記述、<th></th>のセルのバックグラウンドカラーを灰色にすることは問題なく実装出来ました。
しかし、試しでclass = morikoの枠線のbottomのカラーをredに指定しましたが反応なし。
追加でclass = hirosyamaの枠線のtopをredにしましたがそれも効果なし。

.table-A{
  font-size: 14px;
  border: 0;
  border-collapse: collapse;
  width: 100%;
  margin: 0px;
}
.table-A th,
.table-A td{
  border: solid 1px ;
  padding: 5px 10px;
}
.table-A th{
  background-color: #EEEEEE;
  text-align: left;
}
.table-A caption{
  text-align: left;
  font-weight: bold;
}
.table-A th .moriko{
  border-bottom: solid 3px red;
}
.table-A th .hirosyama{
  border-top: solid 1px red;
}

上記のような状態を解決するにはHTMLもしくはCSSで具体的にどういった記述をすればよいのでしょうか。また上記の記述でなぜ実装が意図した通りにならないのか、についても教えていただけると嬉しいです。

Answer 1

CSSセレクタの記述方が間違っています。要素＋要素内のクラスで指定する場合は繋げて書きます。

・・・
  .table-A th.moriko{
    border-bottom: solid 3px red;
  }
  .table-A th.hirosyama{
    border-top: solid 1px red;
  }

Comments

[digitalhimiko]

さっそく回答いただきありがとうございます！
つなげて書くのしりませんでした。。。教えていただいたおかげで解決しました！助かりました。
今後ともよろしくお願いします。