Selectores de clase

Los selectores de clase permiten crear un estilo CSS que el diseñador podrá aplicar a todos los elementos HTML que desee.

La definición de un selector de clase se realiza de la forma siguiente:


.nombre_de_la_clase { declaración(es) de estilo}
 

Es decir, un punto, seguido del nombre que queremos atribuir a la clase, seguido de la declaración de estilo escrita entre llaves.

Ejemplo


.rojo { background-color: red;}
 

Esta definición de clase puede utilizarse para cualquier etiqueta del documento o de la aplicación. De ahí el término "clase universal".

No obstante, la clase así definida no tiene ningún efecto si no se invoca en el documento.

La llamada a la clase se realiza del siguiente modo:


<etiqueta class="nombre_de_la_clase">
 

Ejemplo


<div class="rojo"> ... </div>
 

Comentarios

  • El punto del selector de clase no se utiliza a la hora de llamar a la clase class (error frecuente).

  • Una misma clase se puede invocar varias veces en el documento HTML. Por ejemplo: 

    
    <div class="rojo">Item 1<div> 
    <div>Item 2<div> 
    <div class="rojo">Item 3<div>
     

    Aquí solamente las divisiones con la clase rojo tendrán un color de fondo rojo.

  • Es posible mezclar las declaraciones class e id.

  • Un nombre de clase puede estar formado por letras, cifras, el guión y el carácter de subrayado. El primer carácter no puede ser un número, un guión o un carácter...

Si desea saber más, le proponemos el siguiente libro:
couv_RIT35HTM.png
60-signet.svg
Versión impresa
20-ecran_lettre.svg
Versión online
41-logo_abonnement.svg
En ilimitado con la suscripción ENI
130-boutique.svg
En la tienda oficial de ENI
Anterior
Selectores de tipo
Siguiente
Selectores de identificación