:first-of-type CSS Pseudo Class

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The CSS :first-of-type pseudo-class is a selector that targets the first element of its type within its parent container. It allows you to apply styles specifically to the first occurrence of a particular element type, such as a <p> (paragraph) or <h1> (heading), within a given container.

For example, if you have a list of several paragraphs within a <div> element, you can use :first-of-type to style the first paragraph differently from the others without needing to add extra classes or IDs to the HTML markup. Here's a simple CSS rule using :first-of-type:

div p:first-of-type {
font-weight: bold;
}

In this example, the first <p> element within any <div> will have its text displayed in bold.

The :first-of-type pseudo-class is useful for applying unique styles to the first occurrence of a particular element type within a container, enhancing the flexibility and maintainability of your CSS code.

Syntax

: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

The following table will show you the current browser support for the CSS :first-of-type pseudo class.

Desktop
Edge Chrome Firefox Opera Safari
1213.59.53.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1212

Last updated by CSSPortal on: 1st October 2023