Existen tres selectores básicos fundamentales:
- Tipo⟶ También es conocido como selector de elemento o selector de etiqueta. Hace referencia a todos los elementos a etiquetas de un mismo tipo.
- Clase (.)⟶ El atributo class es un atributo global, común a todas las etiquetas HTML, y permite especificar las clases que se aplicarán a un determinado elemento. En CSS, los nombres de las clases vienen precedidos por un punto (.); es imprescindible incluir este carácter en CSS y no en el atributo class de las etiquetas en HTML, un error muy común en los primeros desarrollos de cualquier persona.
- Identificador (#).⟶ El carácter inicial en el código CSS es #, en lugar del punto, y se aplica a aquellas etiquetas cuyo atributo id coincida con el texto tras la #.
También es posible utilizar la combinación de selectores para seleccionar etiquetas anidadas. Para anidar selectores, se especifican uno tras otro separados por espacios en blanco, siempre empezando por el elemento con menor nivel de anidamiento en el documento HTML.
Para aplicar el mismo estilo a diferentes reglas no es necesario repetir código, se puede separar las reglas por comas y especificar el estilo una sola vez.
Otros selectores:
- Universal (*). Cuando se incluye en una regla, selecciona todos los elementos. Es difícil tenerlo bajo control y se pueden aplicar estilos sin darse cuenta.
- Con el carácter ":"
- :link⟶ Sólo es aplicable a enlaces. Modifica el estilo por defecto de aquellos hipervínculos no visitados a los que se aplique la regla.
- :visited⟶ Se aplica a los hipervínculos visitados.
- :hover⟶ Modifica el estilo cuando el puntero del ratón está sobre un elemento al que se le aplica la regla. Es posible utilizarlo en todos los elementos, no solo en los hipervínculos. En caso de enlaces, es muy importante declarar :hover después de :link y :visited, en caso de que existan, para que :hover funcione correctamente.
- :active⟶ Se aplica a enlaces que están siendo pulsados. Al pulsar se activa el estilo definido por la regla de CSS, y al dejar de pulsar se deja de aplicar la regla. Es necesario declarar :active después de :hover para que tenga efecto.
- :focus⟶ Destaca el elemento que está activo o que tiene el foco en un formulario.
