Jobs Hub

CSS :only-of-type

The CSS :only-of-type pseudo-class is used when we need to select an element that is the only child element of specified type, of its parent element. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p:only-of-type {font-weight: bold; font-style: italic; color: sienna;}
   </style>
</head>
<body>

   <p>This is para one (the only para inside BODY).</p>
   <div>
      <p>This is para one, inside DIV one.</p>
      <p>This is para two, inside DIV one.</p>
   </div>
   <div>
      <p>This is para one, inside DIV two (the only para inside this DIV).</p>
   </div>
   
</body>
</html>
Output

This is para one (the only para inside BODY).

This is para one, inside DIV one.

This is para two, inside DIV one.

This is para one, inside DIV two (the only para inside this DIV).

CSS Online Test

« Previous Tutorial Next Tutorial »