Child Combinator > : When a Greater than Sign Provides the Super Power

Combinators are powerful CSS tools that can help you precisely target very specific elements on the screen. In this quick cssnippet, I am going to look at the child combinator and how powerful it can be. I am using an example from a recent feature I added to this site. 

Using the Descendent Combinator

If you look at this page, Adding Aside Content to CKEditor 5 in Drupal, A JavaScript Solution, you will find a hint at the bottom of the page. A few weeks back I noticed that the word hint was showing multiple times as illustrated in the image below. 

Image

First, let look at the code and why this would happen. 

The HTML is below. As you can see, we have a lot of nested elements. 

<aside class="hint">
  <p>If like you could write the 3rd line <code>hint.parentNode.insertBefore(asideNode, hint);</code> in 2 lines like the following.</p>
  <pre>
    <code><span>const</span> hintParent = hint.<span>parentNode</span>;
hintParent.<span>insertBefore</span>(asideNode, hint);</code>
  </pre>
</aside>

And this is the CSS that added the work Hint. Can you see the issue?

.hint :first-child::before {
  content: 'Hint';
  display: block;
  font-weight: bold;
  font-size: 1rem;
  line-height: 2rem;
}

The reason this happens is that the code uses the descendant combinator. The descendant combinator is that sneaky combinator that is represented by a space. You probably use the descendant combinator without even thinking about it all the time.

The descendant selector selects all elements on the page that are descendant, regardless of their depth. 

So the code above looks for all(*) first children of the elements within the element with the .hint class, adds a before pseudo element, and applies the rule which contains the content property with value Hint and styling for it.  

So in the above example, if you look at the underlying code structure, you will see that the code element is a first child of the inner p. Next, the code is the first child of the pre and then have the span which is also a first-child.

How can we fix this? Use the Child Combinator

The way to fix this is to use the power of a greater than sign or the child combinator. The thing to note here is that it has to be a direct child. Adjust the CSS like below, and now it only selects the direct descendant.

-.hint :first-child::before {
+.hint > :first-child::before {
  content: 'Hint';
  display: block;
  font-weight: bold;
  font-size: 1rem;
  line-height: 2rem;
}

Summary

That's it; we have just learnt how you can use the child combinator to target direct children of an element in your CSS. I use this a lot in my code, especially when creating menus with many nested menus. Usually you want to target the top-level element in a list differently than nested elements for adding icons for an expander for example. 

Can you think of any other ways you have used this recently? Let me know in the comments.

Thanks for reading; I write a weekly newsletter on front-end design and development, It's a work in progress and a journey in itself. Be sure to sign up below or in that pesky pop up over there. Until next time, Carpe diem.