:first-of-type CSS Pseudo Class

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

HTML

<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>

CSS

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; 

}