Style every elements that is the first child of its parent with CSS

CSS Web Development Front End Technology

To style every element that is the first child of its parent, use the CSS :first-child selector.

Example

You can try to run the following code to implement the :first-child selector −

<!DOCTYPE html>
<html>
   <head>
      <style>
         p:first-child {
            background-color: orange;
         }
      </style>
   </head>
   <body>
      <h1>Heading</h1>
      <p>This is demo text.</p>
      <div>
         <p>This is demo text, with the first child of its parent div.</p>
         <p>This is demo text, but not the first child.</p>
      </div>
   </body>
</html>

Vanithasree

Published on 08-May-2018 13:42:07

Related Questions & Answers
Style every elements that is the last child of its parent with CSS
Style every element that is the first element of its parent with CSS
Style every element that is the only child of its parent with CSS
Style every element that is the second child of its parent with CSS
Style every element that is the only element of its parent with CSS
Style every element that is the last element of its parent with CSS
Style every element that is the nth element of its parent with CSS
Style every element that is the child of its parent, counting from the last child with CSS
Select every element that is the second element of its parent, counting from the last child
Style every element that has no children with CSS
Selects all elements where the parent is a <div> element with CSS
Style every element with a lang attribute value with CSS
Selects all elements inside <div> elements with CSS
Selects every <ul> element that are preceded by a element with CSS
Selects all elements that are placed immediately after <div> elements with CSS

Previous Page Print Page

Style every <p> elements that is the first child of its parent with CSS

Example