Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Specific DIV Hyperlink Color

Posted on 2016-10-10
1
Medium Priority
?
95 Views
Last Modified: 2016-10-12
Hi,
I would like to have a completely unique Hyperlink color for a page as compared to the rest of the website.
So for example, if the active hyperlink color for the website is grey, I would like the active hyperlink color on one particular page to be red.

Can someone explain how this can be done please?


Thanks!
0
Comment
Question by:canu
1 Comment
 
LVL 44

Accepted Solution

by:
zephyr_hex (Megan) earned 2000 total points
ID: 41837552
Add a class to the hyperlinks on the "special" page, and then use css to target the class and specify the link color.

HTML
<a href="www.google.com" class="uniqueLink">Google</a>

Open in new window


CSS
.uniqueLink {
  color: red;
}

.uniqueLink:visited {
  color: green;
}

Open in new window


Here is a Fiddle Demo.

If you have a lot of links on the page, it may be more efficient to use a class on a container (whatever contains all of the links).  Here's an example of that approach

HTML
<div class="uniqueLink container">
     <a href="www.google.com">Google</a>
     <a href="www.yahoo.com">Yahoo</a>
</div>

Open in new window


CSS
.uniqueLink > a {
  color: red;
}

.uniqueLink > a:visited {
  color: green;
}

Open in new window


Fiddle Demo.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question