CSSを選択最初の行クラス

Question

で私はこのような行があります：

<tr class="team_2">Team Member</tr> 
<tr class="team_2">Team Member</tr> 
<tr class="team_1">Team Member</tr> 
<tr class="team_2">Team Member</tr> 
<tr class="team_1">Team Member</tr> 

私はチームのキャプテンとして、各チームの最初のメンバーを強調したいです。私はこれを試しました：

table tbody tr.team_2:first-of-type, table tbody tr.team_1:first-of-type { 
background: red; 
} 

この行は強調表示されていますが、3行目（チーム1のキャプテン）は強調表示されていません。このタイプのセレクタは可能ですか？

Answer 1

逆順にする必要があります。this answer for more infoを参照してください。基本的にこれらのクラスのすべてをのハイライトの色に設定した後、DOMをさらに調べて、その後の兄弟クラスをデフォルトのにリセットします。理想的にはあなただけのチームメンバーにクラスを追加し、その特定のクラスを標的とする

.team_2, .team_1 { 
 
    background-color: red; 
 
} 
 

 
.team_1 ~ .team_1 { 
 
    background-color: transparent; 
 
} 
 
.team_2 ~ .team_2 { 
 
    background-color: transparent; 
 
}

<table> 
 
<tr class="team_2"><td>Team Member</td></tr> 
 
<tr class="team_2"><td>Team Member</td></tr> 
 
<tr class="team_1"><td>Team Member</td></tr> 
 
<tr class="team_2"><td>Team Member</td></tr> 
 
<tr class="team_1"><td>Team Member</td></tr> 
 
</table>

Answer 2

：

また、あなたはあなたのテーブルでtd要素を配置する必要があります。

HTML

<tr class="team_2"> 
<td class="captain">Team Member</td> 
</tr> 
<tr class="team_1"> 
<td>Team Member</td> 
</tr> 
<tr class="team_1"> 
<td class="captain">Team Member</td> 
</tr> 
<tr class="team_2"> 
<td>Team Member</td> 
</tr> 

CSS

.captain{.....} 

---

EDITは：1ベンは、より良いあなたの質問に整列されたように私は私の答えを編集しました。