Skip to content

2021-02-06 • – views

How to style links that do not have a class with CSS

It's not uncommon to want to style default links across your site higher up the cascade. This can be problematic if your default link styling is doing more than just removing an underline and or setting a default color.

For example, lets say our default link styling should make use of a 🌈 gradient as seen below. We don't want this styling applied via a class because we want the styling to be applied to content coming from WYSIWYG or general purpose links throughout the site.

scss
a {
background-image: linear-gradient(
to bottom right,
red,
orange,
yellow,
green,
blue,
purple
);
background-clip: text;
-webkit-text-fill-color: transparent;
}

Since this styling is applied globally, when we get to styling our buttons. We have to undo our stylized link styling.

scss
.btn {
background-image: none;
background-clip: border-box;
-webkit-text-fill-color: inherit;
padding: 1rem;
background-color: #000;
color: #fff;
}

Ideally we're not having to continually undo styling from higher up the cascade across our CSS project. One possible way to sidestep this is only apply our stylized link styles to links that do not have a class. We can make the assumption that those should be using our custom link styles.

To do that we can update our global a tag style block to use the not selector.

scss
a:not([class]) {
background-image: linear-gradient(
to bottom right,
red,
orange,
yellow,
green,
blue,
purple
);
background-clip: text;
-webkit-text-fill-color: transparent;
}

Now when we get to styling button links, we do not have to undo any overly specific styling since that is not being applied to links with classes present.

Check out the demo on CodePen.

Note: There are also other ways to accomplish this same goal. Use what works best for you and your team.