CSS Solid

☰

Pseudo-Class - :first-of-type

Selects the first child element of its type of the parent element.

Example:

p:first-of-type {
  color: red;
}

Above example sets text color (red) to the first P child element based on its type of the parent element.

Example: 


<!DOCTYPE html>
<html>
<head>
    <title>CSS selector - :first-of-type</title>
    <style>
       p:first-of-type {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">Click Me</a>
        <p>First para</p>
        <p>Second para</p>
    </div>
</body>
</html>

Result:

In the above example,

  • Selects first para (P) element (based on its type) under the parent element DIV.
  • It doesn't select first element because its type (<a>) is different.

Using following Document Object Model (DOM) tree, above example is explained.