Home 〉 CSS Tutorials 〉 CSS Combinators Explained with Examples | Child, Descendant, Sibling Selectors

CSS Combinators Explained with Examples | Child, Descendant, Sibling Selectors !

CSS Combinators Explained with Examples | Child, Descendant, Sibling Selectors !

Confused about selecting specific elements in CSS? Combinators like child (`>`), descendant (space), adjacent sibling (`+`), and general sibling (`~`) help you apply styles to elements based on their relationship in the HTML structure. This is essential when working with deeply nested tags. Understanding combinators helps write cleaner, more targeted styles. Here is the detailed blog post on the same.

Introduction to CSS Combinators

In CSS, combinators define the relationship between two selectors. They help you select elements based on their location or relationship in the HTML document. There are four types of combinators:

  • Descendant Selector (' ')
  • Child Selector ('>')
  • Adjacent Sibling Selector ('+')
  • General Sibling Selector ('~')

Let's understand each with real examples.

1. Descendant Selector (' ')

Selects all elements that are descendants of a specified element.

Code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.d-sel p {
color: green;
}

</style>
</head>
<body>

<div class="d-sel">
<p>This paragraph is inside a div.</p>
</div>

</body>
</html>

output 📌

This paragraph is inside a div of class 'd-sel'.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

✅ In this example, any '<p>' inside a '<div>' will be styled with green color.

2. Child Selector ('>')

Selects only direct children of an element.

Code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.child-sec > li {
color: blue;
}

</style>
</head>
<body>

<ul class="child-sec">
<li>Direct child</li>
<ul class="child-sec">
<li>Nested child</li>
</ul>
</ul>

</body>
</html>

output 📌

  • Direct child
    • Nested child
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

✅ Only the top-level '<li>' elements inside '<ul>' whose class is 'child-sec' will be blue.

3. Adjacent Sibling Selector ('+')

Selects an element that is immediately next to another element.

Code 📝

<!DOCTYPE html>
<html>
<head>
<style>

h1 + p {
color: red;
}

</style>
</head>
<body>

<h1>Heading</h1>
<p>This paragraph comes right after h1.</p>
<p>This paragraph won't be selected.</p>

</body>
</html>

output 📌

Heading

This paragraph comes right after h1.

This paragraph won't be selected.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

✅ Only the first '<p>' right after '<h1>' is selected.

4. General Sibling Selector ('~')

Selects all sibling elements that follow the specified element.

Code 📝

<!DOCTYPE html>
<html>
<head>
<style>

h2 ~ p {
color: purple;
}

</style>
</head>
<body>

<h2>Subheading</h2>
<p>First paragraph</p>
<p>Second paragraph</p>

</body>
</html>

output 📌

Subheading

First paragraph

Second paragraph

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

✅ All '<p>' elements after '<h2>' are styled.

Conclusion

CSS combinators give you powerful tools to select elements based on relationships. Using them efficiently helps keep your CSS clean and structured.

  • Use descendant for broad selections.
  • Use child for targeting direct children only.
  • Use adjacent sibling for styling immediate siblings.
  • Use general sibling for styling all following siblings.

Suggested Posts:

Related Topics:

Frequently Asked Questions (FAQs)

What is the difference between descendant and child combinator?

A descendant selects any nested element, while a child selector targets only direct children.

Can combinators be used with class or ID selectors?

Yes. Example: '.container > .item' selects direct children with class '.item'.

Are combinators supported in all browsers?

Yes, all modern browsers support CSS combinators.

Previous Post Next Post