Selecting Child Elements with CSS


The CSS child combinator is used to select all child elements of a parent element. The CSS descendant combinator is used to select all descendants of a parent element

Child combinator

The CSS child combinator is used to select all child elements of a parent element. The syntax of the CSS child combinator is as follows. The > comes between two selectors −

Selector > Selector {
   attribute: /*value*/
}

Example

The following example illustrate the CSS child combinator −

<!DOCTYPE html>
<html>
<head>
   <style>
      article > p {
         color: black;
         background-color: orange;
      }
   </style>
</head>
<body>
   <article>
      <h2>Demo Heading</h2>
      <p>Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius.</p>
   </article>
   <p>This is demo text.</p>
   <div>
      <p>This is another demo text.</p>
   </div>
</body>
</html>

Descendant combinator

The CSS descendant combinator is used to select all descendants of a parent element

The syntax of the CSS descendant combinator is as follows −

Selector Selector {
   attribute: /*value*/
}

If you want to select elements within elements, then use the element element combinator −

article p

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      article p {
         text-align: center;
         border: 10px groove tomato;
      }
   </style>
</head>
<body>
   <article>
      <h2>Demo Heading</h2>
      <p>This is another demo text. </p>
   </article>
   <p>This is demo text.</p>
</body>
</html>

The nth child

Style the element that is the nth child of its parent. For example, set the background color for the 1st child of the .child div −

.child:nth-child(1){
   background-color: #FF8A00;
}

Set the background color for the 2nd child of the .child div −

.child:nth-child(2){
   background-color: #F44336;
}

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      form {
         width:70%;
         margin: 0 auto;
         text-align: center;
      }
      * {
         padding: 2px;
         margin:5px;
         box-sizing: border-box;
      }
      input[type="button"] {
         border-radius: 10px;
      }
      .child{
         display: inline-block;
         height: 40px;
         width: 40px;
         color: white;
         border: 4px solid black;
      }
      .child:nth-child(1){
         background-color: #FF8A00;
      }
      .child:nth-child(2){
         background-color: #F44336;
      }
      .child:nth-child(3){
         background-color: #C303C3;
      }
      .child:nth-child(4){
         background-color: #4CAF50;
      }
      .child:nth-child(5){
         background-color: #03A9F4;
      }
      .child:nth-child(6){
         background-color: #FEDC11;
      }
   </style>
</head>
<body>
   <form>
   <fieldset>
   <legend>CSS Pseudo Classes and CSS Classes</legend>
   <div id="container">
      <div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
   </div><br>
</body>
</html>

Updated on: 26-Dec-2023

926 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements