5 replies [Last post]
tmtechnique
Offline
newbie
Last seen: 5 years 36 weeks ago
Joined: 2009-04-09
Posts: 3
Points: 0

Hi,

I have thousands of "internal site bookmarks" which appear in this format:

Internal Site Bookmark 1
Internal Site Bookmark 1
Internal Site Bookmark 1

They each have a unique ID and matching name but they do not have a class name or an href.

On the other hand, I also have regular hyperlinks throughout the site with no class names:

Hyperlink 1
Hyperlink 2
Hyperlink 3

Right now, ALL anchors on the site are set to be blue: body a {color: blue;}

However, I want the above internal site bookmarks to be black and the others to be blue.

How can I select and color the bookmark anchors differently than the hyperlinks?

Is it possible to select ONLY anchors that have an ID and name?

Is it possible to select ONLY anchors that have an ID?

Thanks for your help!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 2 hours ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

That would be the point of

That would be the point of having the pseudo class :link style on the 'a' or ':link'

You could also use the attribute selector to target anchors based on the attributes they have but these wont work in IE6 and are limited in IE7

How are your internal page links targeting?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 min 39 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9276
Points: 3282

Since the link

Since the link pseudo-classes apply to "a" elements with an "href" attribute, you may do this:

a:link {
    color: red;
    }
 
a:visited {
    color: green;
    }
 
a {
    color: black;
    }
===================
 
  <p><a href="#target" >link</a></p>
  <p><a  name="target">target</a></p>

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.

tmtechnique
Offline
newbie
Last seen: 5 years 36 weeks ago
Joined: 2009-04-09
Posts: 3
Points: 0

Hugo wrote:That would be the

Hugo wrote:

That would be the point of having the pseudo class :link style on the 'a' or ':link'

Great! Thank you! Now my bookmarks(a)are black and my hyperlinks (a:link) are blue.

But, then if I add a red colored hover style, the black bookmarks now turn red on hover

a { color: black; }
a:link { color: blue; }
a:hover { color: red; }

I would like the bookmarks to remain black on hover. I only want a:links to have a hover color of red.

Is there something obvious that I'm leaving out?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 min 39 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9276
Points: 3282

a:hover applies to all "a"

a:hover applies to all "a" elements. If you want only the links to respond, use a:link:hover, a:visited:hover {...}.

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.

tmtechnique
Offline
newbie
Last seen: 5 years 36 weeks ago
Joined: 2009-04-09
Posts: 3
Points: 0

Oh wow this is great! Didn't

Oh wow this is great! Didn't know you could do that Smile

Thanks so much!