Jobs Hub

CSS :first-of-type

The CSS :first-of-type pseudo-class selects the first child element of specified element type of its parent. For example, the following CSS code applies the style to first child of type P, of its parent:

p:first-of-type {background-color: black; color: white; padding: 8px;}

CSS :first-of-type Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p:first-of-type {background-color: orchid; color: white; padding: 10px;}
   </style>
</head>
<body>

   <p>This is para one.</p>
   <p>This is para two.</p>
   <div>
      <p>This is para one, inside DIV.</p>
   </div>
   
</body>
</html>
Output

This is para one.

This is para two.

This is para one, inside DIV.

CSS Online Test

« Previous Tutorial Next Tutorial »