Mastering the Child Selector in CSS

Child Selector ( > )

A Child Selector in CSS, denoted by the greater-than symbol (>), is used to target and apply styles to specific HTML elements that are direct children of a particular parent element. It allows you to select elements based on their immediate parent-child relationship in the HTML structure.

Syntax: The syntax for a child selector is as follows:

.container > p {
  /* CSS styles go here */
}

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Child Selector</title>
    <style>
      div > p {
        color: blueviolet;
      }
    </style>
  </head>
  <body>
    <h2>Child Selector ></h2>

    <p>The child selector (>) selects all elements that are the children of a specified element.</p>

    <div>
      <p>DIV PARA - Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio repellendus, inventore architecto dolorum reiciendis et.</p>
      <p>DIV PARA - Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio repellendus, inventore architecto dolorum reiciendis et.</p>
      <section>
        <p>SECTION PARA - Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio repellendus, inventore architecto dolorum reiciendis et.</p>
        <p>SECTION PARA - Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio repellendus, inventore architecto dolorum reiciendis et.</p>
      </section>
    </div>

    <p>PARA - Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio repellendus, inventore architecto dolorum reiciendis et.</p>
  </body>
</html>

Live Preview

The provided CSS code div > p { color: blueviolet; } is a child selector that targets and applies styles to <p> elements that are direct children of <div> elements.

div > p: This is a child selector that consists of two selectors separated by the greater-than symbol (>)

div: This is the parent selector, targeting all <div> elements in the HTML document.p: This is the child selector, targeting all <p> elements that are direct children of the <div> elements.

{ color: blueviolet; }: This is a CSS declaration block enclosed within curly braces {}.

color: blueviolet;: This declaration sets the text color of the targeted

elements to "blueviolet." "Blueviolet" is a valid CSS color value.

The primary purpose of this CSS rule is to change the text color of

elements that are immediate children (direct descendants) of <div> elements to "blueviolet."

Child selectors are useful when you want to apply styles to elements that have a specific parent-child relationship in the HTML structure, and you want to avoid styling elements that are further nested. They allow for precise targeting of immediate child elements within a container or parent element.