| Interactive Media Design

Combinators

Combinatorsopen in new window are special type of selectors that are used to combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document. There are four types of combinators:

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

Descendant

The descendant combinator, which is represented with a space, selects all elements that are descendants of the element. The descendants are not limited to direct children.

This is most commonly used combinator as it can affect the largest number of elements. Let's look at an example. If we had a navbar with a dropdown containing its own set of links then we would have anchor tags that are not direct children of the navbar.

<nav class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropdown-button">Dropdown &#9663;</button>
    <div class="dropdown-content">
      <a href="#">Item 1</a>
      <a href="#">Item 2</a>
      <a href="#">Item 3</a>
    </div>
  </div>
</nav>

Even so, it would be possible to style all of the links the same by using the descendant combinator.

.navbar {
  display: flex;
  padding: 10px;
  background-color: black;
  font-family: sans-serif;
}

If we wanted to select and style all of the anchor tags, we could use the descendant combinator.

.navbar a {
  padding: 10px;
  color: white;
  text-decoration: none;
}

Notice how both main navbar links and the dropdown-content links were styled. That is because even thought these links do not share the same parent element, they are still descendants of the navbar.

Child

The child combinator, which is represented as a >, is to select only those elements that are direct children of the first selectors. This is different from the descendant combinator in that it will not affect any element beyond the direct children.

Let's return to our navbar example. But this time we are going to make an alteration. We have decided that while the background of the navbar is black, the dropdown content will be off-white.

.dropdown-content {
  background-color: #f9f9f9;
}

This of course will make seeing the links very difficult to see. To fix this problem, lets target the main links using the child combinator instead. Then we can style the dropdown content links separately.

.navbar > a {
  padding: 10px;
  color: white;
  text-decoration: none;
}

adjacent

The adjacent combinator, which is represented with a +, will select the element that is the very next sibling to the selected element, if any exists.

Lets see this in action. The following code will create a row of red boxes that turn blue when hovered over them.

.boxes {
  display: flex;
}

.box {
  width: 50px;
  height: 50px;
  margin: 10px;
  background-color: indianred;
}

.box:hover {
  background-color: cadetblue;
}

But now, lets add an extra bit of code so that when you hover over a box, the next will turn orange, and we will use the adjacent combinator to do it.

.box:hover + .box {
  background-color: goldenrod;
}

Now, lets go back to our navbar. We made some additional changes to navbar

sibling

The sibling selector works like adjacent selector but it selects all the following siblings after the selected element.

In the above example if we replace + with a ~ we will get the sibling selector which will colour all the boxes coming after the one that is hovered.

.box:hover ~ .box {
  background-color: goldenrod;
}

References