Skip to main content

Child Selector

In CSS, the child selector is used to select an element that is a direct child of another element. The child selector is represented by the > character between two selectors.

Syntax​

The syntax for the child selector is as follows:

index.css
selector1 > selector2 {
  /* CSS properties */
}
  • selector1: The parent element.
  • selector2: The direct child element.
  • CSS properties: The CSS properties to be applied to the direct child element.

Example​

In the following example, the child selector is used to select all <span> elements that are direct children of the <div> element:

index.css
div > span {
  color: red;
}

In the HTML code below, the CSS rule will not apply the color red to the text inside the <span> element because it is not a direct child of the <div> element.

index.html
<div>
  <span>This text will not be red.</span>
  <div>
    <span>This text will not be red.</span>
  </div>
</div>

The child selector is more specific than the descendant selector and less specific than the adjacent sibling selector.

Key Points to Remember
  • The child selector is represented by the > character between two selectors.
  • The child selector selects an element that is a direct child of another element.
  • The child selector is more specific than the descendant selector and less specific than the adjacent sibling selector.
  • The child selector is also known as the child combinator.
  • The child selector is useful when you want to target only the direct children of an element.

Example: Using Child Selector​

In the following example, the child selector is used to select all <span> elements that are direct children of the <div> element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Child Selector Example</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div>
    <span>This text will be red.</span>
    <div>
      <span>This text will not be red.</span>
    </div>
  </div>
</body>
</html>

Now, you can see the output of the above code in the Browser Window like this:

http://127.0.0.1:5500/index.html
This text will be red.
This text will not be red.

In the above example, the CSS rule will apply the color red to the text inside the first <span> element because it is a direct child of the <div> element. The second <span> element is not a direct child of the <div> element, so the CSS rule will not apply to it.

Example: Using Multiple Levels of Children​

In the following example, the child selector is used to select all <span> elements that are direct children of the <div> element, which is a direct child of the <body> element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Child Selector Example</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div>
    <span>This text will be red.</span>
  </div>
</body>
</html>

Now, you can see the output of the above code in the Browser Window like this:

http://.../index.html
This text will be red.

In the above example, the CSS rule will apply the color red to the text inside the <span> element because it is a direct child of the <div> element, which is a direct child of the <body> element.

  • Descendant Selector: The descendant selector selects an element that is a descendant of another element.
  • Adjacent Sibling Selector: The adjacent sibling selector selects an element that is immediately preceded by a specified element.
  • General Sibling Selector: The general sibling selector selects an element that is preceded by a specified element.
  • Parent Selector: The parent selector selects an element that is a direct parent of another element.
  • Ancestor Selector: The ancestor selector selects an element that is an ancestor of another element.
  • Universal Selector: The universal selector selects all elements in a document.