Computer >> Computer tutorials >  >> Programming >> CSS

Usage of :first-child pseudo-class in CSS


Use the :first-child pseudo class to add special style to an element that is the first child of some other element.

Example

You can try to run the following code to understand the usage of :first-child pseudo class −

<html>
   <head>
      <style>
         div > p:first-child
         {
            text-indent: 25px;
         }
      </style>
   </head>
   <body>
      <div>
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be indented</p>
      </div>
         <p>But it will not match the paragraph in this HTML:</p>
      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div. This paragraph will not be effected.</p>
      </div>
   </body>
</html>