CSS Combinators

In this chapter, we will learn about CSS combinators. Combinators are used to define the relationship between selectors, allowing you to select elements based on their relationship to other elements. Understanding combinators is essential for writing efficient and specific CSS rules. We will cover:

• Introduction to CSS Combinators
• Descendant Combinator
• Child Combinator
• Adjacent Sibling Combinator
• General Sibling Combinator
• Examples of Using CSS Combinators

Introduction to CSS Combinators

CSS combinators are characters that explain the relationship between two selectors. There are four main combinators in CSS:

1. Descendant Combinator (space)
2. Child Combinator (>)
3. Adjacent Sibling Combinator (+)
4. General Sibling Combinator (~)

Descendant Combinator

The descendant combinator selects all elements that are descendants of a specified element. The descendant combinator is represented by a space between two selectors.

Syntax

ancestor descendant {
  property: value;
}

Example

div p {
  color: blue;
}

HTML

<div>
  <p>This paragraph is inside a div and will be blue.</p>
  <span>
    <p>This paragraph is also inside a div and will be blue.</p>
  </span>
</div>
<p>This paragraph is not inside a div and will not be blue.</p>

In this example, all <p> elements that are descendants of a <div> will have blue text.

Child Combinator

The child combinator selects all elements that are direct children of a specified element. The child combinator is represented by the > character between two selectors.

Syntax

parent > child {
  property: value;
}

Example

div > p {
  color: red;
}

HTML

<div>
  <p>This paragraph is a direct child of a div and will be red.</p>
  <span>
    <p>This paragraph is not a direct child of a div and will not be red.</p>
  </span>
</div>
<p>This paragraph is not inside a div and will not be red.</p>

In this example, only <p> elements that are direct children of a <div> will have red text.

Adjacent Sibling Combinator

The adjacent sibling combinator selects an element that is immediately adjacent to a specified element. The adjacent sibling combinator is represented by the + character between two selectors.

Syntax

former + latter {
  property: value;
}

Example

h1 + p {
  color: green;
}

HTML

<h1>Heading</h1>
<p>This paragraph is immediately after an h1 and will be green.</p>
<p>This paragraph is not immediately after an h1 and will not be green.</p>

In this example, only the <p> element that is immediately after an <h1> will have green text.

General Sibling Combinator

The general sibling combinator selects all elements that are siblings of a specified element. The general sibling combinator is represented by the ~ character between two selectors.

Syntax

former ~ latter {
  property: value;
}

Example

h1 ~ p {
  color: purple;
}

HTML

<h1>Heading</h1>
<p>This paragraph is a sibling of an h1 and will be purple.</p>
<span>Some text</span>
<p>This paragraph is also a sibling of an h1 and will be purple.</p>

In this example, all <p> elements that are siblings of an <h1> will have purple text.

Examples of Using CSS Combinators

Example 1: Descendant Combinator

nav ul li {
  list-style-type: none;
}

HTML

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

In this example, all <li> elements that are descendants of a <nav> and <ul> will have no list style.

Example 2: Child Combinator

article > p {
  font-weight: bold;
}

HTML

<article>
  <p>This paragraph is a direct child of an article and will be bold.</p>
  <div>
    <p>This paragraph is not a direct child of an article and will not be bold.</p>
  </div>
</article>

In this example, only <p> elements that are direct children of an <article> will be bold.

Example 3: Adjacent Sibling Combinator

h2 + p {
  margin-top: 0;
}

HTML

<h2>Subheading</h2>
<p>This paragraph is immediately after an h2 and will have no top margin.</p>
<p>This paragraph is not immediately after an h2 and will have a top margin.</p>

In this example, only the <p> element immediately after an <h2> will have no top margin.

Example 4: General Sibling Combinator

h3 ~ p {
  font-style: italic;
}

HTML

<h3>Subsection</h3>
<p>This paragraph is a sibling of an h3 and will be italicized.</p>
<span>Some text</span>
<p>This paragraph is also a sibling of an h3 and will be italicized.</p>

In this example, all <p> elements that are siblings of an <h3> will be italicized.

Conclusion

In this chapter, you learned about CSS combinators, including the descendant, child, adjacent sibling, and general sibling combinators. These combinators allow you to select elements based on their relationships to other elements, enabling you to write more specific and efficient CSS rules.