04. Combinators

A combinator is something that explains the relationship between two selectors.

We can use combinators as selectors for a more dynamic approach to selecting elements.

There are four different combinators in CSS3.

Descendant Selector (  )

Descedent Selectors allow you to apply styles to elements that are contained within another.

Just specify each selector within another with a space ( ).

For example, take a look at the following HTML list.

<h3>Ways to Apply CSS</h3>
<div id="myList"> 
  <ol>  
    <li>Inline</li> 
    <li>Internal</li> 
    <li>External</li> 
</ol> 
</div>  

If we wanted to select all the <li> elements, we can write:

#myList ol li {
  font-weight: bold;
}

This would select all list elements and bold their fonts.

Child Selector (>)

If you want to choose only direct children, we can use the child selector with the greater than symbol (>). This selects child elements that are directly under the parent element.

Take, for example, this HTML:

<div class="container">
  <article>
    <p>Hello World.</p>
  </article>
  <p>Hello Mars!</p>
</div>

If we applied this CSS, only the "Hello Mars!" will be colored pink.

div>p {
  color: pink;
}

Adjacent Sibling Selector (+)

Sibling elements are those that have the same parent, and adjacent siblings are those that are right next to each other.

With an adjacent sibling selector, we can use the + symbol to choose the next sibling.

The following code will only select sibling4.

<ol>
  <li id="sibling1">Sibling 1</li>
  <li id="sibling2">Sibling 2</li>
  <li id="sibling3">Sibling 3</li>
  <li id="sibling4">Sibling 4</li>
  <li id="sibling5">Sibling 5</li>
</ol>

The following code will only select sibling4.

#sibling3+li {
  color: red;
}

General Sibling Selector (~)

To broaden our scope to all siblings proceeding the selection, we use a tilde (~). This will select all elements that are of a sibling that come after the selected item.

The following code will choose all list items that come after sibling2.

#sibling2+li {
  color: red;
}

A lot to learn? That's okay!

Note that there are already quite a few selectors we can use, and it may seem overwhelming. Don't feel pressured to memorize them all in one sitting. With practice and repitition, you'll become familiar with the most important ones that suit your own needs.

Build modern and responsive webpages

HTML & CSS

Build modern and responsive webpages Try Front-end

This book teaches HTML as if it's for anyone - hobbyists, students, and professionals - and it's full-color throughout. It utilizes information graphics and lifestyle photography to explain the topics in a simple way that is engaging. You can progress through the chapters from beginning to end or just dip into topics of particular interest at your leisure.

$ Check price
29.9929.99Amazon 4.5 logo(926+ reviews)

More Front-end resources

Aching back from coding all day?

Inversion Therapy Table

Aching back from coding all day? Try Back Problems

Stretch out your back and relieve your back muscles with inversion therapy. This device counteracts the forces of gravity on the body by decompressing and elongating the spine. By using this product just ten minutes a day, you can be well on your way to improved circulation and posture while relieving muscle aches, back pain and stress.

$$ Check price
119.98119.98Amazon 4.5 logo(1,700+ reviews)

More Back Problems resources

Ad