Topic: a:link... a:hover (Page 1 of 1)

Hello,

I'm in the process of re-building an existing site and I've linked a stylesheet to control colors and things. Because the site is so large I want to make sure that I can update all the pages with one change to the stylesheet. My problem is I want to have two different link colors... I've got one row of links on a light colored background, and a row of links on a dark colored background. I need these two rows of links to be different in color, and controlled by a linked stylesheet (not inline CSS). I've tried a couple of things with classes but I can't get it to work. Can the a:link and a:hover be defined in classes? Anyways, It's obvious I havn't a clue as to what I'm doing (or trying to say) so any help would be greatly appreciated. Peace.

Music = Oxygen
70% of statistics are made up on the spot.

Yep, you can do with with classes or ids.

.class a:hover { }

.class a:link { }


:::11oh1:::

.class a:hover { }

Didn't work... but

a.class:hover { }

does work... Is that OK? Or am I going to have problems...

Music = Oxygen
70% of statistics are made up on the spot.

krets got the format wrong, as it will just give the style to inhertied a isde any tag with class labeled "class" (ie: <u class="class"><a href="#">blabla</a></u> will work) . yours is correct :P
.class:hover also works
__________________________________


Sexy Demoness cel

[This message has been edited by Alevice (edited 02-10-2004).]

[This message has been edited by Alevice (edited 02-10-2004).]

[This message has been edited by Alevice (edited 02-10-2004).]

How bout something like the following?

<div id="red">links in here</div>
<div id="blue">links in here</div>

#red a {color:red;}
#red a:link, a:visited {color:whatever;}
#red a:hover {color:whatever;}
#blue - same as above

By declaring them inside divs with IDs, you don't ever have to worry about the styles getting mixed up and don't have to deal with classes. I have segemnted my entire site off like this so I only have to use basic tags everywhere, they are just styled depending on their container div.




[This message has been edited by Ramasax (edited 02-10-2004).]

quote:

---

#red
#blue

---

CSS is for separating structure from presentation. Using red as an ID is not.

Actually, what I said isn't "wrong" it just doesn't work for the way he's using the links.

If he used:

<div class="poo"><a href="blah"></a> <a href="blah"></a> <a href="blah"></a> <a href="blah"></a></div>
<div class="caca"><a href="blah"></a> <a href="blah"></a> <a href="blah"></a> <a href="blah"></a></div>

The technique I used would work just fine and probably better since he wouldn't have to assign a class to each tag inside the div. Since he's going to have two rows of links doing it this way would be a little more economical as far as coding goes.

:P

:::11oh1:::

[This message has been edited by krets (edited 02-10-2004).]

HZR, I was not saying make a div just for the links and name them red & blue, but whatever div they happen to be in. You are going to wrap them in a div regardless.

Along these lines:

<div id="#leftnav">

   <a href=#>link1</a>

   <a href=#>link2</a>

   <a href=#>link3</a>

</div>



<div id="#topnav">

   <a href=#>link1</a>

   <a href=#>link2</a>

   <a href=#>link3</a>

</div>



CSS:



#topnav a {color:red;}

#topnav a.link, a.visited {color:red;}

#topnav a:hover {color:red;}



#leftnav a {color:blue;}

#leftnav a.link, a.visited {color:blue;}

#leftnav a:hover {color:blue;}

Is there a problem there that I am unaware of?

My point was to not name them red and blue, because that isn't separating structure and presentation. Name them something meaningful, like #navigation or #main. #leftnav and #topnav is just as bad as #red and #blue.

Ok I get what you're saying. Stay away from specifics when naming IDs right?

How about #navigation1 and #navigation2?

Whatever man, I'll name my divs "ethelmerman" unless it's a site I'm doing for my job or as part of a group effort. If I name two divs "leftnav" and "rightnav" I know exactly what they're for in the overall structure of things. I'm sorry that doesn't fit HZR's anal retentive guidelines but it'll function exactly the same.

:::11oh1:::

I'm with Krets. css IS the presentation part; html is the structure part. If redroy wants two different navigational sets it makes perfect sense to me to name the ids in a meaningful way. I don't see that as contradictory to css' inent.

css selectors are awesome.

A good case COULD be made for not naming them "topnav" and "leftnav", since the time might come when you want them to be placed somewhere other than top or left. At that point the names have become meaningless. "mainnav" and "subnav" might be more flexible.

redroy's description of them being in rows suggests they are a navigational system. If they aren't, if they are just two sorts of links then again pay attention to an unambiguous but flexible name: as "internal" and "external" for instance.

Russ Weakley (maxdesign) presents one of the best discussion on css selectors I hae run across.

Great link Steve, I had never seen that, but been to the site many times. This page is what I was trying to say

quote:

---

3. IDs have higher specificity than classes

There may be times when a declaration conflicts with another declaration. These conflicts are resolved using the Cascade rules. In simple terms, if a class selector and ID selector were to be in conflict, the ID selector would be chosen.

---

This makes a good case for using IDs over classes. Taking into consideration that ID's can only be used once per page, but since redroy made then sound like navigation should they not be given higher precedence?

I will keep in mind the naming conventions I use in the future when posting example code here.



[This message has been edited by Ramasax (edited 02-11-2004).]

quote:

---

If I name two divs "leftnav" and "rightnav" I know exactly what they're for in the overall structure of things.

---

I think Steve answered that:

quote:

---

the time might come when you want them to be placed somewhere other than top or left.

---

quote:

---

I'm sorry that doesn't fit HZR's anal retentive guidelines but it'll function exactly the same.

---

Do whatever you want, I don't give a fuck. Just want to give tips to those who are willing to take them.

quote:

---

I'm with Krets. css IS the presentation part; html is the structure part.

---

Anyone said anything else? However, as I said earlier, something like id="topnav" is mixing the two.



[This message has been edited by HZR (edited 02-11-2004).]

Thanks a ton!

Music = Oxygen
70% of statistics are made up on the spot.