Can I add CSS controls based on an HREF link?

I had an idea to give different colors to each link on my site’s navbar based on which part of the site they navigate to (i.e. what’s in their href value).

For example, if a link has the #top id in their href, it would turn red
when clicked or hovered over whereas a link with #contact would turn purple.

How can I do that?
Thanks.

Hello

give every single link an #id or class and assign the action colors to the id in CSS

for example

.navContact:hover {
background-color: value;
color: value;
}

No. I mean, I want to add CSS controls specifically to the elements that have the #ids in their HREF values. I already have CSS controls for sections with the corresponding ids.

Edit: Nevermind. I just found the solution.
https://stackoverflow.com/questions/3859101/what-does-ahref-do-in-css