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.

Aching back from coding all day?

Prism Glasses

Aching back from coding all day? Try Back Problems

Ever feel achy from sitting crunched up on your computer table? Try lying down with these optical glasses that allow you to work on your laptop while lying flat on your back. This is the perfect solution with those with limited mobility or those who wish to prevent neck cramps and back strains.

$ Check price
4.454.45Amazon 4 logo(128+ reviews)

More Back Problems resources

Build modern and responsive webpages

JavaScript & JQuery

Build modern and responsive webpages Try Front-end

This book was written for anyone who wants to use JavaScript to make their websites a little more interesting, engaging, interactive, or usable. In particular, it is aimed at people who do not have a degree in computer science (well, not yet anyway).

$ Check price
39.9939.99Amazon 4.5 logo(385+ reviews)

More Front-end resources

Ad