Este selector se utiliza para asignar propiedades a todos los elementos de una página. Para ello se utiliza un asterisco (*). Ejemplo
* { color: red}
Los selectores de etiqueta seleccionan cualquier elemento de una página que coincida con el selector. Por ejemplo, el selector p se aplicaría a todos los párrafos que aparecieran en una página. Para especificar un selector de etiqueta, simplemente utilizamos la etiqueta sin los <> Ejemplo:
p {font-size: small;
text-align: justify;}
A partir de la utilización del estilo anterior, todos los párrafos tendrán tipo de letra pequeña y estarán justificados. En el siguiente ejemplo:
body { color: red}
p {font-size: small;
text-align: justify;}
El color de letra en los párrafos sería rojo, aunque no se indica, ya que hereda esta propiedad de su elemento padre body.
Cuando se declara una regla en la hoja de estilo, esta regla se aplica a todos los elementos HTML descritos por su selector. Así en los ejemplos anteriores se están indicando las propiedades de todos los párrafos del documento. Sin embargo, en muchas ocasiones se pretende destacar algunos párrafos y darles características distintas a la del resto. Esto podría conseguirse añadiendo etiquetas html del tipo <font face>, pero esto es precisamente lo que estamos tratando de evitar. Para ello, se provee de un atributo extra en casi todos los elementos del lenguaje HTML, llamado class (clase). Podemos organizar "clases" de elementos del mismo tipo y aplicar una apariencia distinta a cada clase.
Supongamos que tenemos una página formada por preguntas y respuestas. Tendríamos, por tanto, dos tipos distintos de párrafos. Podríamos poner las preguntas en rojo y las respuestas en azul, mientras que otros párrafos tendrían otras propiedades. Utilizando las clases podemos asignar a los párrafos que sean una pregunta, la clase pregunta, y a los que sean una respuesta la clase respuesta. Y luego, en la hoja de estilos asignar una apariencia distinta a cada una.
El código html sería
<p class="pregunta"> ¿Qué extensión tienen las hojas de estilo? </p>
<p class="respuesta"> css </p>
Mientras que en la hoja de estilo tendríamos:
p.pregunta {color: red;}
p.respuesta {color:blue;}
En este ejemplo estamos indicando que todos los párrafos que sean de la clase pregunta serán en rojo y los de clase respuesta serán en azul. En este ejemplo si tuviéramos una cabecera h3 de la clase pregunta
<h3 class="pregunta"> ¿Qué extensión tienen las hojas de estilo? </h3>
no se le aplicaría el color rojo, ya que en la hoja de estilo se está indicando p.pregunta, es decir, que la orden solo afecta la clase pregunta de la etiqueta p, no de la etiqueta h3.
En cambio, si en la hoja de estilo pusiéramos
.pregunta {color: red;}
estaríamos aplicando el color rojo a todos los elementos de la clase pregunta, independientemente de en qué etiqueta estén.
Un error muy frecuente es dar un nombre a la clase relativo a la apariencia visual, en lugar de a su función. En el ejemplo anterior se está dando nombre según la función: "preguntas" o "respuestas". Sin embargo se podría haber dado como nombre a las clases "rojo" y "azul". Evidentemente, podemos elegir el nombre que queramos, pero si en el futuro decidimos cambiar y que las preguntas en vez de ser en rojo sean verdes, tendremos el lío de que la clase "rojo" no sale de color rojo, sino verde.
Los selectores de id funcionan de manera muy similar a los selectores de clases,
salvo que, a diferencia de estos últimos, sólo pueden aplicarse
a un elemento de la página. Quiere decir que si hay un elemento
que tiene asignado el atributo id="principal" no podrá
haber otro id con igual valor (es decir, con el mismo nombre). La sintaxis en
la CSS también es similar, solamente que en vez de usar un punto se utiliza
el carácter de numeral (#):
h1#titulo1 {text-align: center}
#pregunta1 {color: green}
En el primer caso, aquel elemento h1 con id="titulo1"
de la página será centrado. En el segundo, cualquier elemento
que tenga asignado el atributo id="pregunta1" irá
en verde.
Los selectores de id no tienen el grado de flexibilidad de los selectores de clases, por ejemplo, pero son una opción para aquellos casos en que se necesite identificar de modo exclusivo un determinado elemento de la página.
Cuando tenemos varios selectores que comparten las mismas declaraciones pueden
agruparse en una lista separada por comas (,). No se trata de un
tipo de selector especial sino de una fórmula abreviada para aplicar las
mismas propiedades a distintos selectores en un solo paso. Por ejemplo, si tenemos:
h1 {color:red}
p {color:red}
table {color:red}
#pregunta1 {color:red}
Podemos simplificarlo de este modo:
h1, p, table, #pregunta1 {color:red}