CSS Combinators

CSS Combinators with Examples

In this article, I am going to discuss CSS Combinators with Examples. Please read our previous article where we discussed Conflicting CSS Styles with Examples. CSS combinators are explaining the relationship between two selectors. CSS selectors are the patterns used to select the elements for style purposes. A CSS selector can be a simple selector or a complex selector consisting of more than one selector connected using combinators. A combinator is something that explains the relationship between the selectors.

CSS Combinators

A combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There can be more than one simple selector in a CSS selector, and between these selectors, we can include a combinator. Combinators combine the selectors to provide them with a useful relationship and the position of content in the document.

Combinators allow us to be clearer about our rules and select elements by passing more information to the selector. We can combine them with four important types of combinators.

  1. Adjacent Sibling Selector
  2. General Sibling Selector
  3. Child Selector
  4. Descendant Selector
CSS Adjacent Sibling Combinator Selector

The adjacent sibling selector is used to select an element that is directly after another specific element. Sibling elements must have the same parent element, and “adjacent” means “immediately following”.

Adjacent sibling is added by adding a plus between the selectors we want to combine and again these could be more than two, we could add more to this list, so it could be div + p + a to select anchor tags that are connected to the paragraph and div. The following example selects the first <p> element that are placed immediately after <div> elements

Example:
div + p {
     color:red;
}

CSS Adjacent Sibling Combinator Selector

In the above example we set a red color, it assigns it to all paragraphs that directly follow an h2 tag, which is why the first and last paragraph get the red color here and the second paragraph doesn’t because the second one follows an h3 tag which is in between an h2 tag and the paragraph and therefore it’s not a direct sibling of the h2 tag.

Example to Understand CSS Adjacent Sibling Selector:
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>Adjacent Sibling Selector</h2>

<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

<div>
  <p>Paragraph 5 in the div.</p>
  <p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>

</body>
</html>
Output:

Example to Understand CSS Adjacent Sibling Selector

Note: Elements share the same parent. The second element comes immediately after the first element.

CSS General Sibling Combinator Selector (~)

The general sibling selector selects all elements that are next siblings of a specified element. General sibling uses the tilde sign here between the selectors we want to combine. The following example selects all <p> elements that are next siblings of <div> elements:

Example:
div ~ p {
     color: red;
}

CSS General Sibling Combinator Selector (~)

In general sibling combinator, all paragraphs get the red color, even though the second paragraph doesn’t directly follow an h2 tag. For the general sibling, it’s only important that there is an h2 sibling, doesn’t have to be directly in from of it, just an h2 element on the same level as the paragraph.

Example to Understand CSS General Sibling Selector:
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>General Sibling Selector</h2>

<p>The general sibling selector (~) selects all elements that are next siblings of a specified element.</p>

<p>Paragraph 1.</p>

<div>
  <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

</body>
</html>
Output:

Example to Understand CSS General Sibling Selector

Note: Elements share the same parent. The second element comes after the first element (doesn’t have to come directly after it).

CSS Child Combinator Selector

The child selector selects all elements that are the children of a specified element. The child uses a greater than sign. The following example selects all <p> elements that are children of a <div> element:

Example:
div > p {
color: red;
}

CSS Child Combinator Selector

Red color gets applied on the first and last paragraph but not on the one which is nested inside the article because this child combinator says any paragraph that is a direct child of a div should get the style.

Example to understand CSS Child Selector
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
  background-color: yellow;
}
</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>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section>
    <!-- not Child but Descendant -->
    <p>Paragraph 3 in the div (inside a section element).</p>
  </section>
  <p>Paragraph 4 in the div.</p>
</div>

<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>

</body>
</html>
Output:

Example to understand CSS Child Selector

Note: The second element is a direct child of the first element

CSS Descendant Combinator Selector

The descendant selector matches all elements that are descendants of a specified element. Descendant uses whitespace. The following example selects all <p> elements inside <div> elements:

Example
div p {
color:red;
}

CSS Descendant Combinator Selector

All paragraphs get the red color no matter if they are a direct child of the div or not simply because here it just matters that there is a div somewhere above them in the DOM and the second element is just a descendent of the first element, not a direct child.

Example to Understand CSS Descendant Selector
<!DOCTYPE html>
<html>
<head>
<style>
div p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS Descendant Selector</h2>

<p>The descendant selector matches all elements that are descendants of a specified element.</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>
Output:

Note: The second element is a descendant of the first element.

In the next article, I am going to discuss CSS Box Model with Examples. Here, in this article, I try to explain CSS Combinators with Examples. I hope this CSS Combinators with Examples article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *