codescracker
css

CSS :first-child - Style First Child Element



The CSS :first-child pseudo-class selects the first child element of its parent. For example, the following CSS code applies style to all P, that are of course the first child of their parent element:

p:first-child {background-color: #ccc; padding: 10px;}

CSS :first-child Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p:first-child {background-color: turquoise; padding:10px; text-align: center;}
      li:first-child {color: red;}
   </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>
   <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
   </ul>
   
</body>
</html>
Output

This is para one.

This is para two.

This is para one, inside DIV.

CSS Online Test


« Previous Tutorial Next Tutorial »



© Copyright 2021. All Rights Reserved.

CodesCracker