Always aim high

I was doing a bit of tweaking on our agency site the other day. I introduced a <del> element to one of the headings in a new post. It looked pretty rubbish though because the text decoration was the same colour as the text and made it hard to read.

Text reads "RSS is back still here". The word "back" has a strike through it

At first I thought, “easy, I’ll just add text-decoration-color to <del> elements”.

del {
  text-decoration-color: var(--color-secondary);
}

That was easy, but it feels a bit specific to me, especially when we already have this rule:

a {
  text-decoration-color: var(--color-secondary);
  text-decoration-thickness: 0.2ex;
}

This makes links look like this:

We'll find the smartest way to achieve your ambition, and we'll make sure you can sustain it when we're done, just like we have already for clients like Google, OCEG and Scott's Bass Lessons.

The links have a nice teal underline.

I want both the <del> and the <a> to have that same text-decoration effect, including the thickness, so I do a grouped selector right?

a, del {
  text-decoration-color: var(--color-secondary);
  text-decoration-thickness: 0.2ex;
}

Well, yeh, that works, just like the first snippet of CSS does, but it’s not global enough for my liking. What happens if say, I want to use an <ins> element one day?

The answer is a universal selector, also known as a wildcard:

* {
  text-decoration-color: var(--color-secondary);
  text-decoration-thickness: 0.2ex;
}

Now, any element that has text-decoration—that doesn’t define it’s own text-decoration-color or text-decoration-thickness—will have this rule applied automatically.

This is the power of CSS right here. If you do as much as you can, as high up as you can, you write a hell of a lot less CSS. Then, when you use semantic HTML: pages just style themselves.

Text reads "RSS is back still here". The word "back" has a strike through it, which is teal

Now doesn’t that look lovely?


👋 Hello, I’m Andy and this is my little home on the web.

I’m the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone and Piccalilli, a publication that will level you up as a front-end developer.


Back to blog