Targeting an anchor CSS based on URL?

[toolman]

Hi there,

Is it possible to target an anchor element based on the URL?

I have the following outputted HTML:

<a href="https://www.website.co.uk/category/christmas-competitions/" class="category-item">
							   <span class="christmas-competitions"></span>  <span class="category-name">Christmas Competitions</span><span class="count">6 </span></a>

As you can see the href class is category-item which is the same for all links in this section.

I would like to give this element a different background, text color etc.

Is this possible by targeting the christmas-competitions part some way?

Thanks!

[SamA74]

Is could be done with an attribute selector.

CSS Selectors for transitions and specific words

You could look at attribute selectors for this. But really… You are not kidding. The code you have there is very well ripe for an update. It’s work to change it, but long overdue.

But why not add another class, or even ID if it’s unique?

[toolman]

Thank you, I used the following:

a.category-item[href="https://www.website.co.uk/category/christmas-competitions/"]