Think about these things first before adding a CSS class to your HTML element.
Should I be using this HTML tag or is there a more appropriate element?
Read through the list of
HTML elements
and see if a closer match exists. You should have at least one
<main> tag on your page, and probably at least
one <header> tag too. Almost every website
should have at least one <nav> and you may want
to add some <article> or
<section> tags.
Don't be afraid to use form controls outside of a
<form>. And if there is a tag specifically for
your datatype (like the <time> tag) use it.
Once you've started replacing <div> and
<span> tags with more specific elements, it
becomes easier to use the relational CSS selectors. For instance your
article > header might be different from your
section > header.
Is this tag performing a specific role?
If you're trying to select between multiple instances of the same HTML tag,
check if those tags are performing different
roles. For instance, you might have multiple
<header> tags, but only one of them is
[role="banner"].
Look through the other attributes that your element supports. Are there other attributes you should be setting and could be selected on?
Does this tag represent a different kind of object from the other tags?
There is a specification for encoding information about the underlying
"Things" a webpage may contain. It's called
Microdata. If you add microdata to your tags then you can select specific objects
using the itemscope and especially itemprop attributes. For instance, I have
an unordered list of keywords in my article header which is differentiated
from all my other <ul> tags because it has
[itemprop="keywords"].
Should I create a new element?
With the custom elements API, we can create new elements! I wouldn't do this purely to avoid adding a CSS class, but I find that if I've made it all the way to this point then the problem may warrant JavaScript, shadowDOM, and having an element lifecycle. This is a good alternative to using querySelector with a class. Some people may disagree with me on that.
Can I use :has() instead?
If none of the above applied to this HTML element, look through some of it's children. Most likely one of these steps can be applied to a child tag. Update the child and then you can use a parent selector.
Writing your CSS selectors is an opportunity to think about HTML semantics. If you want something to look different, then you should make it semantically be different. Use different tags, add attributes, and learn how to use CSS selectors for more complicated relationships.