With CSS we often focus on how to get selectors to apply to only the specific elements that we’re targeting.
Part of this process is making sure the selector does not select the wrong elements. This is often the hardest part!
My blog uses Vue Router, which applies the class .router-link-active to any link that links to the current route (the page we’re on right now). I then use this class to change the colour of the current link, to help the user know where they’re at.
But I wanted to make sure that all links within the page do not get highlighted in the same way.
For example, a table of contents at the beginning of an article should have normal looking links, not the changed colour.
To do this I needed to avoid selecting all of the links with a # in the href attribute:
I’m using a :not query, but then using an attribute selector inside of that.
My actual code is even more fun, because there are a few other things going on that I need to account for: