- Tipos de selectores en CSS
- Selector universal *
- Selector general elemento
- Selector de clase .clase
- Selector de identificador #identificador
- Selector descendiente elemento1 elemento2
- Selector de hijos elemento1>elemento2
- Selector de hermanos elemento~elemento
- Selector de hermanos adyacentes elemento+elemento
- Nota
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
Selecciona los párrafos que tienen clase destacado.
Es diferente a:
p .destacado
El espacio en blanco entre la p y .destacado hace que se seleccionen los elementos que tengan una clase llamada destacado que se encuentren dentro de un párrafo.
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.
Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
Déjanos un comentario