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

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

Aching back from coding all day?

Foam Seat Cushion

Aching back from coding all day? Try Back Problems

This foam seat cushion relieves lowerback pain, numbness and pressure sores by promoting healthy weight distribution, posture and spine alignment. Furthermore, it reduces pressure on the tailbone and hip bones while sitting. Perfect for sitting on the computer desk for long periods of time.

$ Check price
99.9599.95Amazon 4.5 logo(9,445+ reviews)

More Back Problems resources

Ad