Índice

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 ...