:first-of-type CSS Pseudo Class


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.


:first-of-type {
  /* ... */


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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023