Change Link Color Based on Href Attribute

Change link color based on href attribute

I think it is not possible the way you would have like it.

If you want to have different stylings for these links, for example:

<a href="special-boat"></a>   // in blue
<a href="special-car"></a>    // in red
<a href="special-house"></a>  // in green

you need to know what is the second word of the link to give it a special styling.
ATM in your case you can have different styling for normal links, links with "special" in the href-attribute and links with "special-" plus more words in the href-attribute.

If you do not know the second word, all you can do is to prepare stylings for as many cases you can think of.

Another way COULD be, that you give your customer a list of special string combinations which you prepare to have an own styling if he uses them in the link.

<a href="you-dont-know-the-link-c0000FF"></a>   // in blue
<a href="you-dont-know-the-link-c00FF00"></a>   // in green
<a href="you-dont-know-the-link-cFF0000"></a>   // in red

and in your CSS you have:

a[href*=c0000FF] {
  color: blue;
}
a[href*=c00FF00] {
  color: green;
}    a[href*=cFF0000] {
  color: red;
}

You can tell him to use these special strings if he wants to have his link in a special color. But this is 1. not really comfortable for him and 2. quite a strange look in the URLs.

---

Edit: and be sure not to use real words or strings that could be used in other links if you don't want them to be colored by mistake.

how do u change the link color of one specific link in wordpress?

You can write an inline CSS.

<a style="color: #FF00CC" href="http://www.google.com">test</a>

Changing Link Color Property with JavaScript

You have to select the link first before you can modify it.

There are a couple ways to select elements in JavaScript. The most common are:

document.getElementById() if you want to select a single element by its HTML id attribute

document.querySelector() or document.querySelectorAll() if you want to select the first or all elements matching a CSS selector

document.getElementsByClassName() if you want to select elements based on their class attribute

Additionally, you can select all links in a document via document.links

How to change the color of hyperlink if using code as the link's title

Assuming the real issue is a specificity issue because of a rule giving code a specified color, I can recommend two approaches. The first is that you can specify a color for the rule a code.

code{color:red;}a:hover, a:hover code{color:green}

<a href="http://some_link"> <code>Title</code> </a>

Changing the colors of a Hyperlink and paragraph text

If you have access to a stylesheet that can target those directly, you can change it with !important.

So for instance, let's say you wanted to change the <p> color, you could do something like this:

p { color: #fff !important; }

You could do the same for your hyperlinks as well.

Also, looking at the source code of that website, they are sitting inside of your <div class="footernav">. So more specifically, you could target these elements like so(based solely on the source code that is there now).

Targeting the specific elements based on where they live based on their parents(.footernav being the main parent):

.footernav>p#paracred { color: #fff !important; } 

And for your hyperlink

.footernav>p#paracred a { color: #fff !important; }

You most likely don't need the !important since you are targeting them directly, but just in case based on your initial question.

JSFiddle for example: https://jsfiddle.net/Lm8yjdcb/

Other ways to also target these specifically, just for additional info:

Leaving out the <p> target

.footernav>#paracred { color: #fff !important; }
.footernav>#paracred a { color: #fff !important; }

Leaving out .footernav target

#paracred { color: #fff !important; }
#paracred a { color: #fff !important; }

How to change link color when clicked?

You could use a combination of the tabindex attribute and :focus selector to your anchor elements.

http://jsfiddle.net/dcNzt/

HTML

<a href="#" tabindex="1">Stays blue</a>

CSS

a {   
    color: black;   
}

a:active {
    color: blue;
}

a[tabindex]:focus {
    color:blue;
    outline: none;
}

Change text and link-color inside list-element on hover

Anchor tags don't inherit attributes such as color when the href attribute is present.

You can use multiple selectors to apply the same style, separate them with a comma.

ol.tracklist li:hover, ol.tracklist li:hover a {
    background-color: #D21600;
    color: #FFFFFF;
}

Change link color of the current page with CSS

a:active : when you click on the link and hold it (active!).

a:visited : when the link has already been visited.

If you want the link corresponding to the current page to be highlighted, you can define some specific style to the link -

.currentLink {
   color: #640200;
   background-color: #000000;
}

Add this new class only to the corresponding li (link), either on server-side or on client-side (using JavaScript).

---

Related Topics