Nerdkowski Nerdkowski - 5 months ago 9
CSS Question

:first-of-type in table with multiple classes doesn't work

I'm trying to catch the first

tr
with a specific class (
wpcw_fe_unit_pending
). But it doesn't work for some reason.

Here is what I've tried so far.



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>





Here is a Codepen.

Answer

The first-of-type pseudo class only looks at the element. The class attribute is ignored.

6.6.5.8. :first-of-type pseudo-class

Same as :nth-of-type(1).

The :first-of-type pseudo-class represents an element that is the first sibling of its type in the list of children of its parent element.

Comments