Child Selector in CSS - Scientech Easy

The child selector in CSS allows you to select an element that is a direct child of a specified parent element or ancestor. It matches an element that is a direct children of a parent element.

For example, div > p { color: red; } will apply to only <p> elements that are a direct children of a <div> element. To create a child selector in the CSS, put a > (greater than) sign between two simple selectors.

The general syntax to create a child selector is as follows:

parent > child {
    /* CSS properties */
}

Here, the child element will select only if it is a direct child of the parent element.

Basic Examples Based on CSS Child Selector

Let’s take some simple examples based on the child selector.

Example 1:

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
   font-weight: bold;
   color: blue;
}
</style>
</head>
<body>
<div>
    <p>This is a paragraph element which is a direct child of a div element.</p>
    <p>This is another paragraph element which is also a direct child of a div element.</p>
</div>
</body>
</html>

In this example, we have defined a child selector between two selectors div and p elements. Here, both <p> elements is the direct child of a parent div element. Therefore, the CSS rule will apply to both <p> elements and change to blue color.

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
.parent > p {
   font-weight: bold;
   color: blue;
}
</style>
</head>
<body>
<div class="parent">
   <p>This is a paragraph element which is a direct child of a div element.</p>
   <div>
      <p>This is another paragraph element which is a child of a nested div element.</p>
   </div>
</div>
</body>
</html>

Output:

Nested Child Selectors in CSS

Nested child selectors in CSS allow you to select the elements at different levels of the DOM hierarchy. This is useful when you want to apply CSS styles to elements that are direct children at different levels of nesting. Let’s understand this concept with a simple example.

Example 3:

<!DOCTYPE html>
<html>
<head>
<style>
.grandparent > .parent > .child {
     background-color: yellow;
}
</style>
</head>
<body>
<div class="grandparent">
   <div class="parent">
       <div class="child">Direct child of parent element.</div>
       <div>
          <div class="child">Nested child element.</div>
       </div>
   </div>
</div>
</body>
</html>

In this example, we have created a child selector that will apply CSS rule only on the direct child of the parent class that is also a direct child of the grandparent class. The background color of text will be yellow.

Example 4:

<!DOCTYPE html>
<html>
<head>
<style>
/* Style the direct children of .container */
.container > .header {
    background-color: lightblue;
    padding: 10px;
}
.container > .content {
    background-color: lightgray;
    padding: 20px;
}
/* Style the direct children of .content */
.content > .list {
    list-style-type: none;
    padding: 0;
}
/* Style the direct children of .list */
.list > .item {
   background-color: white;
   margin: 5px 0;
   padding: 10px;
}
/* Style the direct children .sublist of .item. */
.item > .sublist {
   list-style-type: circle;
   margin-left: 20px;
   padding-left: 0;
}
/* Style the direct children of .sublist */
.sublist > .subitem {
   background-color: #f0f0f0;
   margin: 5px 0;
   padding: 5px;
}
</style>
</head>
<body>
<div class="container">
   <div class="header">
      <h1>Nested List</h1>
   </div>
   <div class="content">
      <ul class="list">
         <li class="item">Item 1</li>
         <li class="item">Item 2
         <ul class="sublist">
             <li class="subitem">Subitem 1</li>
             <li class="subitem">Subitem 2</li>
         </ul>
         </li>
         <li class="item">Item 3</li>
       </ul>
     </div>
</div>
</body>
</html>

Output:

In this example, we have created a nested list where some list items contain another list. The first child selector .container > .header will directly apply the CSS rule to the header div element that is a direct child of the div element with class attribute value ‘container’.

The second child selector .container > .content will apply the CSS rules to the div element with class attribute value ‘container’ that is also a direct child of a div element with class attribute value ‘container’.

The third child selector .content > .list will apply the CSS rule to the <ul> element with class attribute value ‘list’. This element is a direct child of the parent div element with class attribute value ‘content’. The CSS rule will remove the default list styling (bullets and padding) for the list.

Similarly, the fourth child selector .list > .item will select and apply the CSS rule to <li> elements with class attribute value ‘item’. The <li> element is a direct child of the parent <ul> element.

Combining Child Selector with Other Selectors

CSS allows you to combine the child selector with other selectors to target elements more precisely. You can combine the child selector with class selector, ID selector, attribute selector, and pseudo-class to create highly specific style rules. Let’s explore some examples to illustrate this concept.

Combining with Class Selector

You can combine the child selector with the class selector in CSS to select elements that are the direct children of a parent element and have specific class attributes. The general syntax to combine child selector with the class selector is as:

.parent > .child {
    /* CSS properties */
}

In this syntax,

.parent represents the parent element with a specific class attribute value.
The child combinator (>) specifies that the following element must be a direct child of the parent element.
.child specifies the child element with a specific class attribute value.

Example 5:

<!DOCTYPE html>
<html>
<head>
<style>
/* Style all menu items */
.menu > ul > .menu-item {
   padding: 10px;
   color: black;
}
/* Style the active menu item */
.menu > ul > .menu-item.active {
   font-weight: bold;
   color: red;
}
</style>
</head>
<body>
<div class="menu">
   <ul>
     <li class="menu-item">Home</li>
     <li class="menu-item active">About</li>
     <li class="menu-item">Services</li>
     <li class="menu-item">Contact</li>
   </ul>
</div>
</body>
</html>

Output:

In this example, we have combined the child selector with the class selectors. The selector .menu > ul > .menu-item will target to style all menu-item elements that are direct children of the ul inside the div element with class attribute value ‘menu’.

Now we want to style the active menu item differently from the other items. The selector .menu > ul > .menu-item.active will select to apply the style to that li element that has class attribute value ‘menu-item-active’ and is a direct child of ul element.

Combining with ID Selectors

When you combine the child selector with ID selector in CSS, it will select elements that are direct children of a specific parent element identified by an ID. The general syntax to combine the child selector with ID selector in CSS is as:

#parentID > .childClass {
    /* CSS properties */
}

In the above syntax, the #parentID represents the parent element with a specific ID attribute value. The .childClass represents the child element with a specific class attribute value.

Example 6:

<!DOCTYPE html>
<html>
<head>
<style>
/* Style all paragraphs in the details section */
#profile > .details > p {
    font-size: 14px;
    color: gray;
}
/* Style the name paragraph */
#profile > .details > p.name {
   font-size: 16px;
   font-weight: bold;
   color: black;
}
/* Style the email paragraph */
#profile > .details > p.email {
   font-size: 14px;
   color: blue;
   text-decoration: underline;
}
</style>
</head>
<body>
<div id="profile">
   <div class="details">
      <p class="name">John Doe</p>
      <p class="email">john@example.com</p>
   </div>
</div>
</body>
</html>

In this example, we have combined the child selector with the ID selector. This selector #profile > .details > p will select all p elements that are direct children of the div element with class attribute value ‘details’, which is a direct child of the div element with id attribute value ‘profile’.

Similarly, the selector #profile > .details > p.name will select the p element with the class attribute value ‘name’ that is a direct child of the div element with class attribute value ‘details’, which is also a direct child of the element with the ID attribute value ‘profile’.

This selector #profile > .details > p.email will select the p element with the class attribute value ’email’ that is a direct child of the div element with class attribute value ‘details’, which is also a direct child of the div element with the ID attribute value ‘profile’.

In addition to the combination of CSS child selector with class and ID selectors, we can also combine the child selector with the attribute selector, pseudo-class selector, general sibling selector and adjacent sibling selector. You can try yourself to combine the child selector with other selectors because they are easy, not hard.

I hope that you will have understood the basic syntax of child selector and its combination with other types of selectors and practiced all the example codes. Thanks for reading this tutorial!

Basic Examples Based on CSS Child Selector

Nested Child Selectors in CSS

Combining Child Selector with Other Selectors

Combining with Class Selector

Combining with ID Selectors

Related Posts

Trending now