Selectores de tipo, clase e ID
En este artículo vamos a echar un vistazo a los selectores más simples de que dispones y que seguramente serán los que utilices con mayor frecuencia.
Prerrequisitos: | Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con CSS). |
---|---|
Objetivo: | Conocer los diferentes selectores CSS que podemos utilizar para aplicar CSS a un documento. |
Tipos de selectores
Un selector de tipo también recibe el nombre de selector de nombre de etiqueta o selector de elemento porque selecciona un elemento/etiqueta HTML del documento. En el ejemplo siguiente hemos utilizado los selectores span, em y strong. Se aplica estilo a todas las instancias de los elementos <span>
, <em>
y <strong>
.
Trata de añadir una regla CSS que seleccione el elemento <h1>
y cambie su color para que se vea azul.
El selector universal
El selector universal se indica con un asterisco (*
) y selecciona todos los elementos del documento (o del elemento padre si está encadenado con otro elemento y un operador de combinación descendente, por ejemplo). En el ejemplo siguiente hemos utilizado el selector universal para eliminar los márgenes en todos los elementos. Esto significa que en lugar de la opción predeterminada de aplicación de estilos del navegador, que muestra los títulos de encabezado y los párrafos separados por un margen de respeto, todo se mostrará pegado y no resultará tan fácil distinguir los diversos párrafos.
Es posible observar este tipo de comportamiento en las «hojas de estilo de puesta a cero» (o «hojas de estilo reset»), que anulan el formato del navegador. Fueron muy populares en un momento dado; sin embargo, excluir todo el estilo significa que luego tienes que ponerlo todo de nuevo. Por este motivo tendemos a utilizar el selector universal con mucho cuidado, y para situaciones muy específicas como la que se describe a continuación.
Uso del selector universal para facilitar la legibilidad de tus selectores
Uno de los usos del selector universal es facilitar la legibilidad de los selectores y clarificar sus funciones. Por ejemplo, si quiero seleccionar el primer elemento hijo de cualquier elemento <article>
y poner ese elemento, cualquiera que sea, en negrita, puedo utilizar el selector :first-child
, que veremos con mayor detalle más adelante en el artículo de pseudoclases y pseudoelementos, como selector descendente junto con el selector de elemento <article>
:
article :first-child {
}
Sin embargo, esto podría confundirse con article:first-child
, que selecciona cualquier elemento <article>
que sea el primer elemento hijo de otro elemento.
Para evitar esta confusión podemos añadir al selector :first-child
el selector universal. De este modo la función del selector resulta obvia: seleccionará cualquier elemento que entre en la jerarquía de primer hijo de un elemento <article>
:
article *:first-child {
}
Selectores de clase
El selector de clase comienza con un punto (.
) y selecciona todo elemento del documento que esté afectado por esa clase. En el ejemplo siguiente hemos creado una clase llamada .highlight
y la hemos aplicado en varios lugares del documento. Todos los elementos a los que se aplique esta clase se resaltarán en amarillo.
Delimitación de clases en elementos particulares
Puedes crear un selector que seleccionará los elementos concretos que estén afectados por esa clase. En el ejemplo siguiente vamos a introducir un resaltado en un elemento <span>
con una clase highlight
del de los títulos <h1>
con clase highlight
. Para ello hay que anexar esa clase al selector de tipo correspondiente al elemento que queremos delimitar, sin dejar entre ellos ningún espacio.
Este enfoque hace el elemento CSS menos reutilizable porque la clase solo se aplicará a ese elemento en particular y tendrás que agregar otro selector en caso que quieras que las normas también se apliquen a otros elementos.
Delimitar un elemento afectado por más de una clase
Puedes aplicar más de una clase a un elemento y delimitarlos de forma individual o seleccionar el elemento cuando todas las clases están presentes en el selector. Puede ser útil cuando se trabaja con componentes que se pueden combinar de maneras diferentes en tu página web.
En el ejemplo siguiente hay un elemento <div>
que contiene una nota. El borde gris se aplica cuando la caja tiene una clase notebox
. Si además tiene una clase warning
o danger
, la propiedad border-color
cambia.
Para decirle al navegador que solo queremos seleccionar el elemento si incluye todas estas clases, las encadenamos juntas sin ningún espacio entre ellas.
Selectores de ID
Un selector de ID comienza con un carácter #
en lugar de un punto, pero se utiliza básicamente de la misma manera que un selector de clase. Sin embargo, un ID se puede utilizar una sola vez en cada documento, y a cada elemento solo se le puede aplicar un único id
. Puede seleccionar un elemento que tenga propiedad id
y ese ID puede ir precedido de un selector de tipo que seleccionará el elemento solo si el elemento y el ID coinciden. En el ejemplo siguiente puedes ver todos estos usos:
Nota: Como aprendimos en el artículo sobre la especificidad, un ID tiene una especificidad muy alta y anula la mayoría de los otros selectores. Esto puede dificultar su uso. En la mayoría de los casos es preferible añadir una clase al elemento en lugar de utilizar un ID. Sin embargo, si el ID es la única manera de seleccionar el elemento (tal vez porque no tengas acceso al marcado y, por lo tanto, no lo puedes editar) no hay ningún problema en utilizarlo.
En el próximo artículo
Seguiremos con la descripción de los selectores examinando los selectores de atributo.