Member Avatar for WoW Me Web Girl

hey everybody
in my site the links are set to a certain color thats fine.
but i have some links in a div tab that i want to be a different color then my body links.
ive seen sites have two different color links before.
any help would be greatly appreciated.

  • 3 Contributors
  • 2 Replies
  • 122 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by leakbali

Dani AI

Generated

Both and pointed in the right direction: tab links should be scoped separately from global links. A reliable pattern is to give the tab area a unique id or class, explicitly style the link states there, and — when using Bootstrap — override or set variables rather than relying on generic rules. The examples below show a safe, modern approach that avoids accidentally recoloring every anchor on the site.

A minimal scoped example (HTML + CSS):

<!-- HTML -->
<nav id="tabArea" class="tabs">
  <a href="/one" class="tab-link">Tab One</a>
  <a href="/two" class="tab-link">Tab Two</a>
</nav>

<!-- CSS (put this after any global or framework CSS) -->
#tabArea .tab-link:link  { color: #0b7de9; }
#tabArea .tab-link:visited { color: #095bb0; }
#tabArea .tab-link:hover,
#tabArea .tab-link:focus  { color: #064f8a; text-decoration: underline; }

If Bootstrap is in use, place custom CSS after bootstrap.css or change Bootstrap variables in Sass. Example overrides (CSS placed after Bootstrap):

/* scope to a Bootstrap tab/nav component */
#tabArea .nav-link { color: #6c757d; }
#tabArea .nav-link.active { color: #fff; background-color: #007bff; }

Troubleshooting and accessibility notes: inspect the computed style in DevTools to see which rule wins (specificity and source order matter). Avoid !important except as a last resort. Keep a visible :focus state for keyboard users (don’t remove outlines without replacing them). Also ensure link colors meet contrast requirements; use a contrast checker when choosing colors. For background reading, see MDN on styling links and CSS specificity (Styling links, Specificity) and a contrast tool like WebAIM’s checker (contrast checker).

Recommended Answers

All 2 Replies

Member Avatar for Arkinder

Give each set of links a class and then use CSS.


For basic links/Body links as you called them

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris  nisi ut aliquip ex ea commodo consequat. <a href="http://URL/">link in text</a>  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The CSS

a {
    color: color;
}

For links in your div tab

<a class="divTab" href="http://URL/">Link 1</a>
<a class="divTab" href="http://URL/">Link 2</a>
<a class="divTab" href="httpL//URL/">Link 3</a>

The CSS

a.divTab {
    color: color;
}

If you don't understand just let me know.

Regards
Arkinder

Member Avatar for leakbali

You may try this, same like the way above for the link in body you can use css like this

a{color : #FF0000; text-decoration : underline}

the html example

this is a <a href="">link</a>. this is a link. this is a link. this is a link. this is a link. this is a link. this is a link.

For another link in different element, such div element,

the CSS

div a{color : #00FFFF; text-decoration : underline}

the html example

<html>
<body>
<div>this is a  <a href="">link</a> this is a link</div>
</body>
</html>
Edited by leakbali because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.