Apply pseudo anchor class to a class of links

**bigduke** · May 9, 2005 18:15

I've been trying to apply the link, hover and active pseudo classes to a class of links. Nohting seems to work
This is what I'm doing.

Code:

a.link.main_links {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	color:#555555;
	text-decoration:none;
}

what do i do now :'(

**dannyh** · May 9, 2005 18:20

try this:

a.main_links:link

or

a.main_links:hover

There is no hover class on your selector.

I tested this and it worked:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
<html>
<head>
<title>Tester</title>
	<style type="text/css" media="all">
		@import "stylesheet.css";
	</style>
</head>

<body>
	<div id="container">
<a href="#" class="test">TEST!</a>
	</div>

	</body>
</html>

Code:

body {
	padding: 0;
	margin: 0;
	text-align: center;
	background-color: #363636;
	font-size: 76%;
	color: #363636;
}

#container {
	width: 601px;
	text-align: left;
	background-color: #363636;
	margin: 0 auto;
	padding: 0;
}


a, a:link, a:active {
	color: #b03a67;
	font: 1em arial, verdana, helvetica, sans-serif;
}

a:hover {
	color: #ff5093;
}

a.test:hover {
	color: #fff;
}

**bigduke** · May 9, 2005 19:14

Thanks danny, i started experimenting with it and came up with a

pseudoClass>.<elementClass> and it worked

**Kravvitz** · May 9, 2005 20:23

a

pseudoClass>.<elementClass> doesn't work in Netscape 4.x.

Just use a.<elementClass>

pseudoClass>

**zcorpan** · May 9, 2005 23:32

CSS hardly works in NN4 anyway so it doesn't matter. You're better off hiding the stylesheet entierly from that browser.

**bigduke** · May 10, 2005 02:11

aww man when will they learn to make a "standards compliant browser". Seems like W3C is just another organization blowing its trumpet with no one for audience

Originally Posted by Kravvitz

Just use a.<elementClass>

pseudoClass>

That doesn't work on PhirePhox :'(

**Kravvitz** · May 10, 2005 08:35

The order doesn't matter in Firefox -- I tested and found that both ways work.

Please show us the code that doesn't work for you.

**dannyh** · May 10, 2005 09:23

It works for me in firefox

**bigduke** · May 10, 2005 10:31

Code:

a:main_links.link {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	color:#999999;
	text-decoration:none;
	border-bottom-width:2px;
	border-top-width:2px;
}

a:main_links.visited {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	color:#999999;
	text-decoration:none;
	border-bottom-width:2px;
	border-top-width:2px;
}

a:main_links.hover {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	color:#000000;
	text-decoration:none;
	border-top:2px solid #FF9900;
	border-bottom:2px solid #FF9900;
}

That didn't work on 1.0+

. I know I should have used > 1.0.2 but ... hehe

**Kravvitz** · May 10, 2005 20:19

That's because there is no main_links psuedo-class. You didn't switch the dot and the colon.

It should look like this.

Code:

a.main_links:link

**bigduke** · May 11, 2005 02:04

doh!

Thanks man! took that long to understand something so simple

**bigduke** · May 12, 2005 20:37

here we go again

that developer forsaken dimwitted IE just can't get things right.

the following wouldn't render properly on IE. Works everywhere else.

Code:

a.main_links:link {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	color:#999999;
	padding-top:0px;
	padding-bottom:0px;
	border-top-width:2px;
	border-bottom-width:2px;
}

a.main_links:visited {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	color:#999999;
	text-decoration:none;
	padding-top:0px;
	padding-bottom:0px;
	border-top-width:2px;
	border-bottom-width:2px;
}

a.main_links:hover {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	color:#000000;
	text-decoration:none;
	padding-top:0px;
	padding-bottom:0px;
	border-top:2px solid #FF9900;
	border-bottom:2px solid #FF9900;
}

Take a look at http://www.primacognos.com/temp/index.html in IE. Notice the 1px bottom border while it should actually be 2px.

**bigduke** · May 12, 2005 20:39

here we go again

that developer forsaken dimwitted IE just can't get things right.

the following wouldn't render properly on IE. Works everywhere else.

Code:

a.main_links:link {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	color:#999999;
	padding-top:0px;
	padding-bottom:0px;
	border-top-width:2px;
	border-bottom-width:2px;
}

a.main_links:visited {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	color:#999999;
	text-decoration:none;
	padding-top:0px;
	padding-bottom:0px;
	border-top-width:2px;
	border-bottom-width:2px;
}

a.main_links:hover {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	color:#000000;
	text-decoration:none;
	padding-top:0px;
	padding-bottom:0px;
	border-top:2px solid #FF9900;
	border-bottom:2px solid #FF9900;
}

Take a look at http://www.primacognos.com/temp/index.html in IE. Notice the 1px bottom border while it should actually be 2px.

User Tag List

Thread: Apply pseudo anchor class to a class of links

Thread Tools

Display

Apply pseudo anchor class to a class of links

IE does it yet again .... grrrrr

Bookmarks

Bookmarks

Posting Permissions