Selectores en CSS

Un documento HTML puede llegar a ser muy complejo en su estructura, por lo que llegar a un elemento en particular para darle estilos puede ser una tarea un tanto compleja.

Los Selectores en CSS son los elementos de los Estilos en cascada utilizados para seleccionar uno o varios elemento(s) del HTML que forma(n) la estructura de la página web, con el objetivo de darle algún tipo de formato mediante declaraciones (instrucciones) de CSS.

Tipos de selectores en CSS

Selector universal
*

Para afectar a TODOS los elementos de HTML de la página se emplea el Selector universal, utilizando el símbolo de asterisco (*).

Es útil para definir estilos que sirvan de base para todo el sitio, por ejemplo el color de fondo, familia, tamaño y color de letra.

See the Pen selectorUniversal by Miguel Méndez (@codigo-web) on CodePen.0

Selector general
elemento

Para afectar a TODAS las instrucciones de un solo tipo en el documento de HTML se emplea el Selector general, utilizando el nombre de la instrucción a la que deseamos llegar, o bien una instrucción con clase o identificador definido.

Es útil para definir el estilo general de un elemento, por ejemplo, el estilo que tendrán los párrafos en el documento:

See the Pen selector General by Miguel Méndez (@codigo-web) on CodePen.0

p.destacado

p .destacado

Selector de clase
.clase

Para afectar a TODOS los elementos en el HTML que se encuenten marcados con una clase en particular se emplea el Selector de clase, utilizando un punto (.) previo al nombre de la clase a la que deseamos llegar.

Es útil para definir estilos repetitivos de elementos  a lo largo del sitio web, por ejemplo, un bloque de texto para noticias.

See the Pen selectorClase by Miguel Méndez (@codigo-web) on CodePen.0

Selector de identificador
#identificador

Para afectar al elemento que se encuentre en el HTML marcado con el identificador en particular se emplea el Selector de identificador, utilizando un símbolo de número (#) previo al nombre del identificador al que deseamos llegar.

Se utiliza para dar estilos al elemento de la página, marcado con ese nombre de identificador, por ejemplo, un bloque de nota principal.

See the Pen selectorIdentificador by Miguel Méndez (@codigo-web) on CodePen.0

Selector descendiente
elemento1 elemento2

Para afectar a TODOS los elementos específicos (elemento 2) que se encuentran contenidos dentro del un elemento padre (elemento 1) se emplea el Selector descendiente, utilizando el nombre del elemento padre, un espacio en blanco y posteriormente el elemento hijo al que deseamos llegar.

Dada su flexibilidad y especificidad, su uso es muy generalizado, permite seleccionar con facilidad prácticamente cualquier elemento en el HTML.

Se pueden utilizar mas de dos elementos, pudiendo ser instrucciones, clases o identificadores, separando cada uno de ellos con un espacio en blanco.

See the Pen selectorDescendiente by Miguel Méndez (@codigo-web) on CodePen.0

Selector de hijos
elemento1>elemento2

Para afectar a los hijos directos de un elemento se emplea el Selector de hijos, utilizando el nombre del elemento padre seguido por un símbolo de mayor que (>) y el nombre del o de los elementos hijos  a los que deseamos llegar.

Es útil cuando queremos asegurarnos que afectamos solo a los hijos directos de un elemento, por ejemplo, las ligas de un Menú.

See the Pen selectorHijos by Miguel Méndez (@codigo-web) on CodePen.0

Selector de hermanos
elemento~elemento

Para afectar a elementos que son hermanos de otro, es decir, que se encuentran en el mismo nivel, se emplea el Selector de hermanos, utilizando el nombre del elemento que se encuentre antes del elemento al que deseamos afectar, seguido por un símbolo de tilde (~) y el nombre del elemento hermano al que deseamos afectar.

Es útil cuando deseamos afectar elementos que cumplen con cierta condición, por ejemplo, seleccionar los párrafos (p) que sean hermanos de un título4 (h4).

See the Pen selectoresHermanos by Miguel Méndez (@codigo-web) on CodePen.0

Selector de hermanos adyacentes
elemento+elemento

Para afectar al primer elemento que es hermano de otro se emplea el Selector de hermanos adyacentes, utilizando el nombre del elemento que se encuentre antes del elemento al que deseamos afectar, seguido por un símbolo de más (+) y el nombre del elemento hermano al que deseamos afectar.

Es útil cuando deseamos afectar elementos que cumplen con cierta condición, por ejemplo, seleccionar el primer párrafo (p) que sea hermano de un título4 (h4).

See the Pen selectoresHermanoAdyacente by Miguel Méndez (@codigo-web) on CodePen.0

Nota

Con cualquiera de los selectores en CSS es posible seleccionar varios elementos, sin importar si son instrucciones, clases o identificadores, separando cada uno de ellos con una coma (,) y un espacio en blanco:

p, .clase, #identificador {...}

Conclusión

Los Selectores en CSS son la forma de llegar casi a cualquier elemento del código HTML para proporcionarle estilos en cascada.

Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas. Ver todas las entradas por Miguel Méndez