：複数のクラスを持つテーブルの最初の型が機能しない

Question

私は最初のtrを特定のクラス（wpcw_fe_unit_pending）でキャッチしようとしています。しかし、それは何らかの理由で動作しません。

これまで私が試したことはこれです。ここで

tr.wpcw_fe_unit.wpcw_fe_unit_pending.wpcw_fe_module_group_1:first-of-type td.wpcw_fe_unit { 
 
    border-left: 2px solid red; 
 
}

<table id="wpcw_fe_course" class="wpcw_fe_table" cellspacing="0" cellborder="0"> 
 
    <tbody> 
 
    <tr class="wpcw_fe_module " id="wpcw_fe_module_group_1"> 
 
     <td>Module 1</td> 
 
     <td colspan="2">Topic</td> 
 
    </tr> 
 
    <tr class="wpcw_fe_unit wpcw_fe_unit_complete wpcw_fe_module_group_1"> 
 
     <td>Unit 1</td> 
 
     <td class="wpcw_fe_unit"><a href="">1st Unit - Done</a> 
 
     </td> 
 
     <td class="wpcw_fe_unit_progress wpcw_fe_unit_progress_complete"><span>&nbsp;</span> 
 
     </td> 
 
    </tr> 
 
    <tr class="wpcw_fe_unit wpcw_fe_unit_complete wpcw_fe_module_group_1"> 
 
     <td>Unit 2</td> 
 
     <td class="wpcw_fe_unit"><a href="">2nd Unit - Done</a> 
 
     </td> 
 
     <td class="wpcw_fe_unit_progress wpcw_fe_unit_progress_complete"><span>&nbsp;</span> 
 
     </td> 
 
    </tr> 
 
    <tr class="wpcw_fe_unit wpcw_fe_unit_pending wpcw_fe_module_group_1"> 
 
     <td>Unit 3</td> 
 
     <td class="wpcw_fe_unit"><a href="">3rd Unit - Done</a> 
 
     </td> 
 
     <td class="wpcw_fe_unit_progress wpcw_fe_unit_progress_incomplete"><span>&nbsp;</span> 
 
     </td> 
 
    </tr> 
 
    <tr class="wpcw_fe_unit wpcw_fe_unit_pending wpcw_fe_module_group_1"> 
 
     <td>Unit 4</td> 
 
     <td class="wpcw_fe_unit">4th Unit</td> 
 
     <td class="wpcw_fe_unit_progress wpcw_fe_unit_progress_incomplete"><span>&nbsp;</span> 
 
     </td> 
 
    </tr> 
 
    <tr class="wpcw_fe_unit wpcw_fe_unit_pending wpcw_fe_module_group_1"> 
 
     <td>Unit 5</td> 
 
     <td class="wpcw_fe_unit">5th Unit</td> 
 
     <td class="wpcw_fe_unit_progress wpcw_fe_unit_progress_incomplete"><span>&nbsp;</span> 
 
     </td> 
 
    </tr> 
 
    <tr class="wpcw_fe_unit wpcw_fe_unit_pending wpcw_fe_module_group_1"> 
 
     <td>Unit 6</td> 
 
     <td class="wpcw_fe_unit">6th Unit</td> 
 
     <td class="wpcw_fe_unit_progress wpcw_fe_unit_progress_incomplete"><span>&nbsp;</span> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

はCodepenです。

Answer 1

疑似クラスは、要素のように見えます。 クラス属性は無視されます。 :nth-of-type(1)と同じ

6.6.5.8. :first-of-type pseudo-class

。

:first-of-type疑似クラスは、 要素の子のリスト内のその型の最初の兄弟である の要素を表します。