:first-of-type CSS Pseudo Class

Description

The :first-of-type pseudo-class defines the style of the first element of a certain type in a group of sibling elements (having one parent).

Syntax

element:first-of-type { … }

Example

<table>
<tr>
<td>No</td>
<td>Competition</td>
<td>John</td>
<td>Adam</td>
<td>Robert</td>
<td>Paul</td>
</tr>
<tr>
<td>1</td>
<td>Swimming</td>
<td>1:30</td>
<td>2:05</td>
<td>1:15</td>
<td>1:41</td>
</tr>
<tr>
<td>2</td>
<td>Running</td>
<td>15:30</td>
<td>14:10</td>
<td>15:45</td>
<td>16:00</td>
</tr>
<tr>
<td>3</td>
<td>Shooting</td>
<td>70%</td>
<td>55%</td>
<td>90%</td>
<td>88%</td>
</tr>
</table>
table { 
border-collapse: collapse;
width: 100%;
border-spacing: 0;
}
td {
border: 1px solid #6A3E14;
padding: 4px;
}
tr:first-of-type {
background: #7eaaf3;
color: #fff;
}
td:first-of-type {
background: #f3927e;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
91213.59.53.2
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
218410.13.2X