codescracker
css

CSS :only-child



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

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p:only-child {background-color: #ccc; padding: 10px;}
      li:only-child {background-color: #ccc; padding: 10px;}
   </style>
</head>
<body>

   <p>This is para one.</p>
   <div>
      <p>This is para one, inside DIV one (the only para inside this DIV).</p>
   </div>
   <p>This is para two.</p>
   <div>
      <p>This is para one, inside DIV two.</p>
      <p>This is para two, inside DIV two.</p>
   </div>
   <ul>
      <li>one (the only list item inside this unorganized list)</li>
   </ul>
   <p>This is para three.</p>
   <ul>
      <li>first</li>
      <li>second</li>
   </ul>
   
</body>
</html>
Output

This is para one.

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

This is para two.

This is para one, inside DIV two.

This is para two, inside DIV two.

This is para three.

CSS Online Test


« Previous Tutorial Next Tutorial »



© Copyright 2021. All Rights Reserved.

CodesCracker