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

Question

I'm trying to catch the first trwith 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.

Because `:first-of-type` doesn't work that way. It selects the first element of its type under the parent and not the first element of its type which matches the class selectors. — Harry, Jun 13 '16 at 17:32
A class is not a type, it's a class. You probably want a first-of-class pseudo-class but one doesn't exist. — j08691, Jun 13 '16 at 17:32
There's actually no method currently in the CSS spec whereby you can select an element by the `nth` instance of a class. — UncaughtTypeError, Jun 13 '16 at 17:35
Only CSS way would be to first set the property for all elements that have the required classes and then override it for all that are not the first. — Harry, Jun 13 '16 at 17:35

score 1 · Accepted Answer · answered Jun 13 '16 at 17:32

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.

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

1 Answers1