Clases

Asignar clases a elementos: el atributo class

Dado que el número de etiquetas del HTML es reducido, es probable que en una página web se quiera dar un formato distinto a elementos con la misma etiqueta. Se puede sortear esta limitación utilizando clases, que se pueden asignar a cualquier elemento de una página web.

Las clases se asignan con el atributo class. El valor del atributo class (el nombre de la clase) sólo pueden contener caracteres ingleses, números, guiones y subrayados, aunque el primer carácter no puede ser ni un número ni un guión.

<p>- Haga el favor de poner atención en la primera cláusula porque es muy importante. Dice que ... la parte contratante de la primera parte será considerada como la parte contratante de la primera parte. ¿Qué tal, está muy bien, eh?</p>

<p class="aviso">- No, eso no está bien. Quisiera volver a oírlo.</p>
ERROR (no puede mostrarse el objeto)
p.aviso {
  color: red;
}

Cuando se define una clase de elemento, la regla se aplica únicamente a los elementos de ese tipo que tienen esa clase. En el ejemplo siguiente, en la hoja de estilo está definida la clase aviso para la etiqueta <span>. Esa regla no se aplica a ningún elemento, puesto que en la página web la etiqueta <span> no tiene atributo class y la clase aviso está asignada a una etiqueta diferente (<p>).

<p>- Haga el favor de poner atención en la primera cláusula porque es muy importante. Dice que ... <span>la parte contratante de la primera parte será considerada como la parte contratante de la primera parte</span>. ¿Qué tal, está muy bien, eh?</p>

<p class="aviso">- No, eso no está bien. Quisiera volver a oírlo.</p>

- Haga el favor de poner atención en la primera cláusula porque es muy importante. Dice que ... la parte contratante de la primera parte será considerada como la parte contratante de la primera parte. ¿Qué tal, está muy bien, eh?

- No, eso no está bien. Quisiera volver a oírlo.

span.aviso {
  color: red;
}

Los navegadores distinguen los nombres de clases escritos en mayúsculas o minúsculas. En estos apuntes se recomienda utilizar únicamente minúsculas.

<p class="aviso">- Haga el favor de poner atención en la primera cláusula porque es muy importante. Dice que ... la parte contratante de la primera parte será considerada como la parte contratante de la primera parte. ¿Qué tal, está muy bien, eh?</p>

<p class="Aviso">- No, eso no está bien. Quisiera volver a oírlo.</p>
ERROR (no puede mostrarse el objeto)
p.aviso {
  color: red;
}

p.Aviso {
  color: blue;
}

A un elemento con clase se le aplica tanto la regla de la clase como la regla de la etiqueta general (esta es una característica del mecanismo de cascada de las hojas de estilo).

En el ejemplo siguiente, en la hoja de estilo se ha escrito una regla para párrafos <p> en general y otra regla para los párrafos de clase aviso. El elemento con clase hereda las propiedades de los elementos sin clase.

<p>- Haga el favor de poner atención en la primera cláusula porque es muy importante. Dice que ... la parte contratante de la primera parte será considerada como la parte contratante de la primera parte. ¿Qué tal, está muy bien, eh?</p>

<p class="aviso">- No, eso no está bien. Quisiera volver a oírlo.</p>

1º. La parte contratante de la primera parte será considerada como la parte contratante de la primera parte.

2º. La parte contratante de la segunda parte será considerada como ...

p {
  font-style: oblique;
}
p.aviso { color: red; }

Combinar varias clases simultáneamente

Un elemento puede tener asignado varias clases. Para asignar varias clases a un elemento, hay que escribir en el atributo class los nombres de todas las clases que se quieren aplicar, separados por espacios.

<p class="groucho">- Haga el favor de poner atención en la primera cláusula porque es muy importante. Dice que ... la parte contratante de la primera parte será considerada como la parte contratante de la primera parte. ¿Qué tal, está muy bien, eh?</p>

<p>- No, eso no está bien. Quisiera volver a oírlo.</p>

<p class="groucho aviso">- Dice que… la parte contratante de la primera parte será considerada como la parte contratante de la primera parte.</p>
ERROR (no puede mostrarse el objeto)
p.groucho {
  font-style: oblique;
}

p.aviso {
  color: red;
}

El orden en que se escriban los nombres de las clases en el atributo class no es importante, aunque sí que es importante el orden de las reglas en la hoja de estilo. Como muestran los dos ejemplos siguientes, si la misma propiedad está definida en varias clases y a un elemento tiene asignado varias clases, se aplica la definición de la clase que aparece después en la hoja de estilo (esta es una característica del mecanismo de cascada de las hojas de estilo).

<p class="borde-1 borde-2">Este párrafo tiene como clase "borde-1 borde-2".</p>

<p class="borde-2 borde-1">Este párrafo tiene como clase "borde-2 borde-1".</p>
ERROR (no puede mostrarse el objeto)
p.borde-1 {
  border: red 3px solid;
}

p.borde-2 {
  border: blue 3px dotted;
}
<p class="borde-1 borde-2">Este párrafo tiene como clase "borde-1 borde-2".</p>

<p class="borde-2 borde-1">Este párrafo tiene como clase "borde-2 borde-1".</p>
ERROR (no puede mostrarse el objeto)
p.borde-2 {
  border: blue 3px dotted;
}

p.borde-1 {
  border: red 3px solid;
}

Se puede escribir un selector que se aplique únicamente a los elementos que tienen definidas varias clases.

<p class="borde-1">Este párrafo tiene como clase "borde-1".</p>

<p class="borde-2">Este párrafo tiene como clase "borde-2".</p>

<p class="borde-1 borde-2">Este párrafo tiene como clase "borde-1 borde-2".</p>
ERROR (no puede mostrarse el objeto)
p.borde-1.borde-2 {
  border: red 3px dotted;
}

p.borde-1 {
  border: red 3px solid;
}

p.borde-2 {
  border: blue 3px dotted;
}



Asignar la misma clase a distintos elementos

Se pueden asignar la misma clase a elementos distintos:

Número de clases

En principio, se suelen definir tantas clases como tipos de elementos distintos queremos mostrar, pero se podría definir una clase menos aprovechando que también podemos definir en la hoja de estilo la etiqueta sin clase. Los dos ejemplos siguientes darían el mismo resultado.

En este primer ejemplo, para distinguir las intervenciones de los dos personajes en un diálogo, se da clase a todos los párrafos. Los nombres de la clase son los nombres de los personajes.

<p class="groucho">- Haga el favor de poner atención en la primera cláusula porque es muy importante. Dice que ... <span class="aviso">la parte contratante de la primera parte será considerada como la parte contratante de la primera parte</span>. ¿Qué tal, está muy bien, eh?</p>

<p class="chico">- No, eso no está bien. Quisiera volver a oírlo.</p>

<p class="groucho">- Dice que… la parte contratante de la primera parte será considerada como la parte contratante de la primera parte.</p>

<p class="chico">- Esta vez creo que suena mejor.</p>

<p class="groucho">- Si quiere se lo leo otra vez.</p>

<p class="chico">- Tan solo la primera parte.</p>

<p class="groucho">- ¿Sobre la parte contratante de la primera parte?</p>

<p class="chico">- No, solo la parte de la parte contratante de la primera parte.</p>
ERROR (no puede mostrarse el objeto)
p.groucho {
  color: red;
}

p.chico {
  color: blue;
}

En este segundo ejemplo, para distinguir las intervenciones de los dos personajes en un diálogo, sólo se da clase a los párrafos de uno de ellos. El nombre de la clase es el nombre del personaje. La propiedad que antes se establecía en la clase del segundo personaje, esta vez se establdece para la etiqueta general (sin clase).

<p class="groucho">- Haga el favor de poner atención en la primera cláusula porque es muy importante. Dice que ... <span class="aviso">la parte contratante de la primera parte será considerada como la parte contratante de la primera parte</span>. ¿Qué tal, está muy bien, eh?</p>

<p>- No, eso no está bien. Quisiera volver a oírlo.</p>

<p class="groucho">- Dice que… la parte contratante de la primera parte será considerada como la parte contratante de la primera parte.</p>

<p>- Esta vez creo que suena mejor.</p>

<p class="groucho">- Si quiere se lo leo otra vez.</p>

<p>- Tan solo la primera parte.</p>

<p class="groucho">- ¿Sobre la parte contratante de la primera parte?</p>

<p>- No, solo la parte de la parte contratante de la primera parte.</p>
ERROR (no puede mostrarse el objeto)
p.groucho {
  color: red;
}

p {
  color: blue;
}

La ventaja del segundo método es que hay que asignar menos clases. El inconveniente es que las propiedades de la clase no definida hay que asignarla a la etiqueta general y se aplican a todos los elementos.

En general, suele ser más conveniente definir tantas clases como elementos distintos, salvo que una de las clases se tenga que aplicar a casi todos los elementos (más que el resto de clases juntas, por ejemplo) en cuyo caso se puede omitir esta clase y dejarla como etiqueta general. Pero este es un aspecto a valorar en cada página en concreto.