CSS for Roam (3rd lesson): Advanced selectors for #tags and [[pages]]

The irresistible power of Roam, image based on unDraw.co .

Welcome to the third article on the CSS in Roam. Previously, we have covered:

• Roam with Style: Ode to Customization — A general introduction
• CSS for Roam (1st lesson): Roam with Style — First steps
• CSS for Roam (2nd lesson): Power of #tags and [[pages]]

This time, I would like to expand on the power of #tags and [[pages]] and show how they can affect other elements. Before, however, we must prepare ourselves: First, a little recapitulation of basic simple selectors in CSS, then we will learn about the so-called combinators that allow us to create complex selectors, finally, we will look at the code of Roam and what it allows us to do. With this knowledge, we will create our custom highlighting colors in Roam.

A little recapitulation — Simple selectors

We have already seen that we can select an element by its name, by its class, and by its attribute. I have also mentioned that we can select an element based on its ID even though we haven’t seen any example yet. We can visualize these options as follow:

It is also perfectly fine to combine these and create so-called compound selectors. You can find the whole overview on selectors on W3schools web…