utilizar varias class a un mismo elemento

guntin_java · #1 (**permalink**) 01/04/2005, 14:52

Hola...

tengo definida una clase para todos los link

Código:

a:link, a:visited {
	color: #000000;
	text-decoration: none;
}

a:hover {
	color: #C0C0C0;
	text-decoration: underline;
}

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

pero a su vez quiero que un enlace en particular utilice otra clase

Código:

.sideboxcontent {
	background-color: #FFDE5F;
	border-bottom: 1pt  #000000;
	border-top: 1pt  #000000;
	height: 15pt;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 800;
	font-size: 10px;
	letter-spacing: 0px;
	color: #000000;
}

pero el enlace que hago <a class=sideboxcontent... siempre me toma los valores de .a

qué puedo hacer

PatomaS · #2 (**permalink**) 01/04/2005, 16:29

Hola

Aunque bastaría con que escribieras la clase debajo de las definiciones de los vínculos generales, hay otro método más elegante.

Código:

#sideboxcontent {
	background-color: #FFDE5F;
	border-bottom: 1pt  #000000;
	border-top: 1pt  #000000;
	height: 15pt;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 800;
	font-size: 10px;
	letter-spacing: 0px;
	color: #000000;
}
...
<a id="sideboxcontent"...

Con esto debería bastar.

Felicidad

frijolerou · #3 (**permalink**) 01/04/2005, 17:43

a.sideboxcontent:link {
background-color: #FFDE5F;
border-bottom: 1pt #000000;
border-top: 1pt #000000;
height: 15pt;
text-align: center;
text-decoration: none;
vertical-align: middle;
font-family: Arial, Helvetica, sans-serif;
font-weight: 800;
font-size: 10px;
letter-spacing: 0px;
color: #000000;
}

Si no le dices al CSS que la clase sideboxcontent se la quieres aplicar a un link (a), ese link seguirá tomando los valores que has dado en el a:link general

josemi · #4 (**permalink**) 04/04/2005, 12:18

Hola,

No soy ningun experto en CSS, pero se que le pusieron el nombre de Cascade Style Sheet porque se aplican los estilos en cascada. El orden de aplicacion viene en http://www.w3.org/TR/CSS21/cascade.html#cascade, y se puede usar !important para "saltarse" ese orden. Asi que en teoria:

Código HTML:

<style>
a:link, a:visited {
	color: #000000;
	text-decoration: none;
}

a:hover {
	color: #C0C0C0;
	text-decoration: underline;
}

a:active {
	color: #FF0000;
	text-decoration: underline;
}
.sideboxcontent {
	background-color: #FFDE5F;
	border-bottom: 1pt  #000000;
	border-top: 1pt  #000000;
	height: 15pt;
	text-align: center;
	text-decoration: none !important;
	vertical-align: middle;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 800;
	font-size: 10px;
	letter-spacing: 0px;
	color: #000000 !important;
}
</style>
</head>
<body>
<a class=sideboxcontent href="#">enlace</a>
</body>
</html>

deberia servir. Creo que ademas es mejor, porque la definicion de .sideboxcontent solo esta en una sola para que solo haya un punto de cambio.

Saludos.

PD: Aunque creo que es mala idea que los links no sean distintos al texto, yo por lo menos les dejaria el text-decoration a underline.