Multiple Anchors ( active, link, visited, & hover)

How do I have multiple anchors within a class?

[The_Warden]

Is it possible to declare your anchors (active, link, visited & hover) within a class? See I created this...

BODY.index1 { background-color: #000000; background-image: none; color: #000000; margin-left: 5px; margin-right: 5px; margin-top: 0px; margin-bottom: 0px; }

Now I want to only have certain properties of the anchor tag to be set within the index1 class.

This then would allow me to have multiple class of the BODY element and if wanted I could ignore setting anchors and just use the default one that is not within the class.

Do you know what I mean? Any ideas?

[goat_boy]

You can apply styles to links inside a class by using a sequential selector....

.index1 a:link {styles}
.index1 a:hover {styles}

The styles would only be applied to links that are inside an element with a class of 'index1'. Or to put it another way, the styles would only be applied to links whose parent element has a class of 'index1'.

Is that what you were after?

[The_Warden]

Perfect, thanks. I was just not sure how the syntax would go.

So is this best to use sequential selector method instead of using child selector? From what I gathered child selectors are now well supported at this time.

Thanks!

[BlobFisk]

Similar to goat_boy's suggestion, you can also structure your pseudo classes like this:

a.index1:link {styles}
a.index1:hover {styles}

[The_Warden]

BlobFisk
Ahhh okay, I figured you could.

Is there any advantage to doing one syntax over another? Browser compatibility?

[BlobFisk]

Good question! I'm not 100% sure - but the reason that I structure my pseudo-classes in the above way is that (1) it's what is quoted in the CSS2.1 Psuedo Class Specification [w3.org], and (2) it make the most logical sense to me. It is an anchor of the class index1.

Good question though - I'm off to have a trawl to see if I can find an answer. Anyone?

[The_Warden]

Well that is a good response and reasoning. I think I will go with that as well unless anyone else has some input on this question.

I'm a strong believer/follower in following standards.

[The_Warden]

BlobFisk
Ahhh I just tried switching my syntax over to what you said above and it appears that it does not work in IE nor Mozilla. Any ideas?

goat_boy's syntax seems to work fine in both browsers.

[BlobFisk]

The_Warden,

I've never had any problems with it (other than NN4.x). The syntax should look like this:

CSS:
a.myStyle:link {...}
a.myStyle:visited {...}
a.myStyle:hover {...}
a.myStyle:active {...}

HTML:
<a href="someLink.html" class="myStyle" title="My Link Info">

I've tested this in IE5+, Mozilla1+, NN6+, Opera6+.

[The_Warden]

BlobFisk
Well this is really odd. I tried it again and still does not appear to be working. Here's a snip it of the area I'm playing with in CSS. Now the first declaration of class index1 is in BODY.index1 not sure if that is the issue. As you can see if you look at the last line I did your syntax and the browser does not seem to recognize it.

BODY.index1 { background-color: #000000; background-image: none; color: #000000; margin-left: 5px; margin-right: 5px; margin-top: 0px; margin-bottom: 0px; }

/************************************************************************************
* Anchor link styles based on BODY.class_name.
*************************************************************************************/
.index a:link{ color: #0000CC; text-decoration: none; }
.index a:visited{ color: #CC0000; text-decoration: none; }
.index a:active{ color: #CC0000; text-decoration: none; }
.index a:hover{ color: #0066CC; text-decoration: overline underline; font-weight: bold; }

.index1a:link { color: #0066CC; text-decoration: none; }
.index1a:visited{ color: #00356A; text-decoration: none; }
.index1a:active{ color: #6699CC; text-decoration: none; }
a.index1:hover{ color: #0066CC; text-decoration: overline underline; font-weight: bold; }

[BlobFisk]

You should use one method or the other, not a mix of the two. Also, the correct ordering for pseudo classes is:

link
visited
hover
active

[The_Warden]

Okay fixed that but still no result. Should I post my entire CSS file?

BODY.index1 { background-color: #000000; background-image: none; color: #000000; margin-left: 5px; margin-right: 5px; margin-top: 0px; margin-bottom: 0px; }

/************************************************************************************
* Anchor link styles based on BODY class.
*************************************************************************************/
a.index:link{ color: #0000CC; text-decoration: none; }
a.index:visited{ color: #CC0000; text-decoration: none; }
a.index:hover{ color: #0066CC; text-decoration: overline underline; font-weight: bold; }
a.index:active{ color: #CC0000; text-decoration: none; }

a.index1:link { color: #0066CC; text-decoration: none; }
a.index1:visited{ color: #00356A; text-decoration: none; }
a.index1:hover{ color: #0066CC; text-decoration: overline underline; font-weight: bold; }
a.index1:active{ color: #6699CC; text-decoration: none; }

[BlobFisk]

Can you post your anchor tag first? The problem might be there.

Also, I'm a little confused as to the purpose of BODY.index1...

[The_Warden]

Are you asking to see the HTML code for an anchor? My tags are basic so that should not be an issue. Here's one anchor I have for an example.

<A HREF="?nView=1&nWebAccountID=<? echo $obResults[0];?>">View</A>

As for the BODY.index1, it is used to define properties of the BODY element. I have multiple BODYs that are applied only when a CLASS is given.

My CSS File

[i]BODY.navbar { background-color: #CCCCCC; background-image: none; color: #000000; margin-left: 5px; margin-right: 5px; margin-top: 0px; margin-bottom: 0px; }
BODY.index { background-color: #CCCCCC; background-image: none; color: #000000; margin-left: 5px; margin-right: 5px; margin-top: 0px; margin-bottom: 0px; }
BODY.index1 { background-color: #000000; background-image: none; color: #000000; margin-left: 5px; margin-right: 5px; margin-top: 0px; margin-bottom: 0px; }
/************************************************************************************
* Anchor link styles based on BODY class.
*************************************************************************************/ 
a.index:link{ color: #0000CC; text-decoration: none; }
a.index:visited{ color: #CC0000; text-decoration: none; }
a.index:hover{ color: #0066CC; text-decoration: overline underline; font-weight: bold; }
a.index:active{ color: #CC0000; text-decoration: none; }
a.index1:link { color: #0066CC; text-decoration: none; }
a.index1:visited{ color: #00356A; text-decoration: none; }
a.index1:hover{ color: #0066CC; text-decoration: overline underline; font-weight: bold; }
a.index1:active{ color: #6699CC; text-decoration: none; }
a.default:link { color: #0066CC; background-color: transparent; text-decoration: underline}
a.default:visited { color: #660000; background-color: transparent; text-decoration: underline}
a.default:hover { color: #6699CC; background-color: transparent; text-decoration: underline}
a.default:active{ color: #6699CC; background-color: transparent; text-decoration: underline}
/* style for the links in the calendar popup */
a.calendar:link { text-decoration: none }
a.calendar:visited { text-decoration: none }
a.calendar:hover { text-decoration: none }
a.calendar:active { text-decoration: none }
HR { color: #000099; background-color: transparent; }
TD { border: none; padding: 2px; font-family: arial, sans-serif; font-size: 10pt; font-weight: normal; }
/************************************************************************************
* Form Elements Styles
*************************************************************************************/ 
INPUT, SELECT, TEXTAREA { background-color: #EEEEEE; font-family: verdana; border: #778899 1px solid; font-size: 12px; color: #000000; padding-top: 1px; padding-bottom: 1px; padding-left: 3px; padding-right: 0px; overflow: auto; width: auto; }
INPUT[type=submit] { background-color: #EEEEEE; font-family: verdana; border: #969696 1px solid; font-size: 12px; color: #000000; padding-top: 1px; padding-bottom: 1px; padding-left: 3px; padding-right: 0px; overflow: auto; }
#controlDisabled { color: #868785!important; }
.container { margin: 10px 40px; padding: 3px; }
/***********************************************************************************
* Alternating table background colors.
************************************************************************************/
.alternateBGColor { background-color: #A6C6B8; }
.alternateBGColor1 { background-color: #EDF8F4; }
.alternateBGColor2 { background-color: #DDEEE6; }
/*.alternateBGColor { background-color: #CCCC99; } */
/*.alternateBGColor1 { background-color: #FFFFFF; }*/
/*.alternateBGColor2 { background-color: #FFFFCC; }*/
.highlightColor { background-color: #C3D8CF; }
/***********************************************************************************
* Mouse Cursors
************************************************************************************/
/* cursor: hand is a work around for IE to produce a mouse cursor of pointer. */
/* Breaks CSS standard but necessary to produce a cursor pointer in IE. */
#cursorPointer { cursor: pointer; cursor: hand; } 
/***********************************************************************************
* Mostly used for rendering client side error messages.
************************************************************************************/
#red { color: #FF0000; }
#whiteText { color: #FFFFFF!important; }
#bold { font-weight: bold; }
/* to color text on a form red when there is an error */
#validationTextColor { color: #FF0000; }
#subAppTitle { font-family: arial, sans-serif; font-size: 12pt; font-weight: bold; }
#heading1 { font-family: arial, sans-serif; font-size: 11pt; font-weight: bold; }
#heading2 { font-family: arial, sans-serif; font-size: 10pt; font-weight: bold; }
#copyright { font-family: arial, sans-serif; font-size: 10pt; font-weight: normal; }
#font1 { font-family: arial, sans-serif; font-size: 10pt; font-weight: normal; }
#font2 { font-family: arial, sans-serif; font-size: 10pt; font-weight: bold; }
#font3 { font-family: arial, sans-serif; font-size: 14pt; font-weight: bold; }
#justify { font-family: arial, sans-serif; font-size: 10pt; font-weight: normal; text-align: justify; }
#small { font-family: arial, sans-serif; font-size: 9pt; font-weight: normal; }[/i]

[BlobFisk]

You need to apply the class to the anchor for the style to kisk in.

For example, <a href="someLink.html" class="calendar" title="My Link Info">

[SuzyUK]

Hi there are two methods and both have different uses... let me try to clarify..

Example One:

<div class="wrapped">
<a href="foo">foo</a>
<a href="foo">foo</a>
<a href="foo">foo</a>
</div>

Example Two:

<div class"content">
some content which then has a link <a href="foo" class="bar">foo</a> then some more
</div>

both of these are legitimate ways to target links however the syntax for the first example is: (Note: the order of declaration in the styles it is important - L-V-H-A - whichever method you use)

.wrapped a:link {properties}
.wrapped a:visited {properties}
.wrapped a:hover {properties}
.wrapped a:active {properties}

this is saying that you are targetting any link whose parent the class="wrapped"

in the second, you are putting the class inside the <a>nchor tag itself so the syntax is:

a.bar:link {properties}
a.bar:visited {properties}
a.bar:hover {properties}
a.bar:active {properties}

which is saying <a> with a class of "bar" in the link/visited.hover/active state..

As to which is the correct way...they both are but they have their different uses. You can see the advantage of wrapping the links in a class if it's say a long menu..as this would mean less markup (you don't have to add the class name every time you add a new link)

but the second way is a useful way to target individual links.

If you are using a different <body> class because you've got different page styles but not content.. then the ideal way is to use method one.

body.index a:link {properties}
body.index1 a:link {properties}

you won't need to change a thing in your HTML except the body class and the links will change themselves..

Suzy

[The_Warden]

Ahh man of course it will only work that way. Yes you are right BlobFisk. I want to apply this to the index1 class. Which is exactly what SuzyUK said. My questions are answered :).

Thanks guys, it works great and is exactly what I needed.

[BlobFisk]

Thanks for the clarification Suzy - I tend to use ID's in this way (#myDiv a:link etc.) and never made the mental leap to the class too!