Como utilizar varias clases css en un mismo elemento html
- Detalles
- Categoría: Programación
- Última actualización el Viernes, 30 Diciembre 2011 11:30
- Escrito por cybnet
- Visto: 4383
Las clases en css pueden ser usadas en múltiples elementos html, a diferencia de los identificadores (id) que, aunque se puede, según las especificaciones de los estándares solo deben aparecer en un elemnto del documento html.
mmmm....y si una clase se puede utilizar en múltiples elementos html, ¿puedo usar en un mismo elemento varias clases css? La respuesta es sí. Aplicar varias clases css a un mismo elemento es tan sencillo como poner en el atributo class cada nombre de la clase que queramos aplicar, separados entre sí por un espacio. Por ejemplo
<p class="clase1 clase2">Algún texto</p>
Nuestra hoja de estilo podría ser:
.clase1 {
font-size: 10px;
}
.clase2 {
color: #000;
}
Así, con este ejemplo, no muy útil pero ilustrativo, el párrafo del ejemplo tendría el texto de tamaño 10px y color negro (#000).
¿Y si quiero aplicar un estilo de forma especifica a aquellos elementos que tengan las dos clases? Para hacer esto se debe especificar el estilo a aplicar al elemento con las dos clases poniendo el nombre de las clases sin separación:
.clase1.clase2 {
font-size: 10px;
color: #000;
}
El estilo mostrado arriba sólo se aplicaría a elementos con las dos clases. Esto es lo que se conoce como chain classes. IE6 no soporta chain classes, aunque bueno, IE6 ya hace tiempo que paso a la historia!!! Quiero volver a recordar que para aplicar el estilo sólo a elementos con las dos clases, se deben poner en el css los dos nombres de las clases sin espacios, de lo contrario, si pones un espacio el efecto es distinto. Por ejemplo:
.clase1 .clase2 {
font-size: 20px;
}
El código css de arriba se aplicará a los elementos de clase2 anidados en un elemento de clase1 (vea Cómo anidar elementos html correctamente). ¿Ves la diferencia de poner o no el espacio entre el nombre de las clases?
Por supuesto puedes usar más de dos clases. Por ejemplo:
div.clase1 p.clase2.clase3.clase4 {
font-size: 10px;
color: #000;
}
El estilo css anterior se aplicará a elementos p que tengan la clase2, la clase3 y la clase4 y que estén anidados en un div de clase1:
<div class="clase1"> <p class="clase2 clase3 clase4"> Texto </p> </div>
clases - class - css - clases css - varias clases css - diseño web - elementos html - selectores css
RSS
Saludos Silvia, en un elemento html se puede poner un sólo id y varias clases css, el ejemplo que has puesto es correcto.
¿Y si necesitamos un id y un class en la misma etiqueta?¿Seria así?
<div id="xxx" class="clase1">
Mil gracias! Será posible hacer esto también con etiquetas <li> anidadas? Sé que esto puede sonar completamente inesesario pero bueno, es tan solo una pregunta?
Ah... perfecto. Mi problema era ese: no estaba agragando "div" delante de la almohadilla "#". Mil gracias. Tema resuleto!
Citando "palitos" :
Código :<div id="clase1">
<div id="clase2">
<span id="clase3">Texto</span>
</div>
</div>
Sigue el ejemplo puesto pero en lugar de utiliza el punto (.) que indica class, utiliza la almohadilla (#) que indica id. Por ejemplo:
Código :
div#clase1 div#clase2 span#clase3 {
font-size: 10px;
color: #000;
}Te en cuenta que este css sólo se aplicará a elementos span de id="clase3" que estén anidados en un div de id="clase2" cuándo este div esté a su vez anidado en otro div de id="clase1".
Si! Genial! Gracias! Era eso. Ahora, c[omo debería hacer si utilizo divs con "id" o "class" en lugar de parrafos y otros elementos anidados? Por ejemplo, si tuviera:Código :
<div id="clase1">
<div id="clase2">
<span id="clase3">Texto</span>
</div>
</div>
Citando "Palitos" : Hola. Es posible aplicar c[odigos a elementos anidados dentro de otros elementos? Es decir, tomando el [ultimo ejemplo, supongamos que ahora dentro de <p class="clase2 clase3 clase4"> class> tengo otro elemento. Puedo acceder a él desde el <div class="clase1">???
No me he enterao de ná!!!
Te refireres a algo así?:
Código :
<div class="clase1">
<p class="clase2 clase3 clase4">
<span class="clase5">Texto</span>
</p>
</div>
Y aplicarle un css como este por ejemplo?:
Código :
div.clase1 p.clase2.clase3.clase4 span.clase5 {
font-size: 10px;
color: #000;
}
Hola. Es posible aplicar c[odigos a elementos anidados dentro de otros elementos? Es decir, tomando el [ultimo ejemplo, supongamos que ahora dentro de <p class="clase2 clase3 clase4"> class> tengo otro elemento. Puedo acceder a él desde el <div class="clase1">???
Perfil
Artículos
RSS
Google +1