CSS for Roam (4. lesson): Pseudo-classes

And more magic with #tags

We made it together to the 4th lesson focusing on CSS for Roam and we still have so much to cover. And while programming JavaScript is rather a difficult task, CSS is a safe playground where anybody can experiment with almost non-existent danger to their precious treasure of ideas called the Roam graph. If this is your first story on CSS for Roam you read from me, please, check out the whole series.

On this little journey, we have already learnt so many things! We can select any element in CSS based on their type, class, ID or attribute, we can select elements also based on their position, we can then change their color or make them disappear! All of that with just a couple of magic words written in a code-block under roam/css. This time, we will move to something that does and does not exist at the same time! Let us learn about pseudo-classes!

This may sound weird, I know! Does it mean that they do not exist? Actually, yes. And no! — They do not exist from the point of view of the HTML code. There are nowhere to find there, yet, they do exist for the web browser and their effects are visible to our eyes. In this lesson, we will learn about them and look at some practical uses for our magic with #tags.

What are they?

Normally, classes are a specific attribute of HTML elements. Do you remember this old example where we looked at the HTML code of the page title in Roam?