CSS Combinators

A combinator is a symbol that explains the relationship between the selectors in CSS. A CSS selector can contain more than one selector while a combinator can be included between multiple selectors.

There are four different combinators in CSS:

1. descendant selector (space)
2. child selector (>)
3. adjacent sibling selector (+)
4. general sibling selector (~)

1. Descendant Selector

The descendant selector selects and styles all HTML elements that are descendants of a specified element.

div p {
  font-size: 18px;
  line-height: 1.6em;
}

The example above styles all the <p> elements present inside a <div>.

2. Child Selector

The child selector selects and styles all elements that are the immediate children of a specified element. Quite similar to the descendant selector but this selector does not style elements which are inside the specified element but are not the immediate childs.

Example

The example above styles one <a> element which is the immediate child of the <div> element but does not affect another <a> element which is placed inside a <p> element inside the <div>.

<div>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. <a href="#">This is a link.</a></p>

  <a href="#">This is a link.</a>
</div>
<style>
div > a{
  font-size: 18px;
  line-height: 1.6em;
  color: #f00;
}
</style>

3. Adjacent Sibling Selector

Adjacent sibling selector selects first element that is the adjacent siblings of a specified element. Adjacent sibling elements must have same parent and appear immediately after the specified element.

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. <a href="#">This is another link.</a></p>
</div>

<a href="#">This is the link that appears immediately after the <div> element.</a>

<a href="#">This is the link that appears after the immediate <a> element.</a>
</div>

<style>
div + a{
  color: #f00;
}
</style>

4. General Sibling Selector

The general sibling selector selects and styles all elements that are the adjacent siblings of a specified element.

The example above selects all <p> elements which are the adjacent of the specified class.

<div class="general">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>

<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</span>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<style>
.general ~ p{
  color: #f00;
}
</style>  

---

Try It Yourself »

---

1 Like 1 Dislike 0 Comment Share Tweet