CSS Combinators

CSS selectors can consist of multiple simple selectors connected by combinators.

CSS Combinators

There are four types:

• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• General sibling selector (~)

1. Descendant Selector

The descendant selector in CSS targets elements that are nested inside another specified element. It’s represented by a space between two selectors.

Example

This is an example of a descendant selector that selects all <p> elements inside <div> elements.

HTML structure:

<div class="container"> 
  <p>This is a paragraph inside the container.</p> 
</div>

You can use a descendant selector to style the <p> element inside the <div> with the class “container”:

CSS Style:

.container p {
 background-color: red;
/* Styles for <p> elements inside elements with class "container" */
}

This selector picks only `<p>` elements inside the ‘container’, not those outside it.

2. Child Selector (>)

It picks all elements that are direct children of a specific element.

Example

This is an example of a Child Selector (>).

HTML structure:

<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>

CSS Style:

ul > li {
color:red;
/* Styles for top-level <li> elements */
}

With the child selector, you can style only the top-level <li> elements inside the <ul>. This selector won’t target the nested <li> elements inside the sub <ul>. It only affects direct children of the <ul> element.

3. Adjacent Sibling Selector (+)

The adjacent sibling selector in CSS is denoted by the plus sign (+). It allows you to select an element that directly follows another specific element within the same parent element.

Example

This is an example of an adjacent sibling selector(+).

HTML structure:

<div>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</div>

CSS Style:

If you want to target the <p> element that directly follows the first <p> element, you can use the adjacent sibling selector in CSS like this.

p + p {
color:red;
/* Your styles here */
}

In this case, the styles within the curly braces will be applied to the second <p> element (“Second paragraph”) because it immediately follows another <p> element.

4. General Sibling Selector (~)

The general sibling selector chooses all elements that come after a particular element and share the same parent.

Example

This is an example of a general sibling selector(~).

HTML structure:

<div>
<p>First paragraph</p>
<span>Span element</span>
<p>Second paragraph</p>
<p>Third paragraph</p>
</div>

CSS Style:

If you want to target all <p> elements that are siblings of the <span> element within the same parent <div>, you can use the General Sibling Selector like this.

span ~ p {
color:red;
/* Your styles here */
}

The styles within the curly braces will be applied to both the “Second paragraph” and “Third paragraph” <p> elements because they are siblings of the <span> element, even though the <span> is not immediately before them.

Note: We welcome your feedback at Easy coding School. Please don’t hesitate to share your suggestions or any issues you might have with the article!