Targeting an anchor CSS based on URL?

HTML & CSS
1

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!

2

Is could be done with an attribute selector.

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

2 Likes
3

Thank you, I used the following:

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

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.