¿Qué son los selectores en CSS?
Los selectores en CSS son los que «seleccionan», por decirlo de alguna manera, cual es el elemento o elementos del HTML al que vamos a aplicar estilo o estilos, porque podemos dar varios estilos a un mismo elemento, y el mismo estilo a varios elementos, siempre teniendo en cuenta la especificidad.
Existen muchos selectores CSS, lo cual nos permitirá seleccionar con gran precisión los elementos a los que queremos aplicar estilos.
En los artículos anteriores ya has visto algunos selectores que hemos utilizado para los ejemplos, en concreto el selector h1 (Título1) y el p (párrafo).
A la hora de dar estilos, si a varios elementos vamos a aplicarle el mismo estilo podemos hacerlo de manera individual o agrupándolos.
[su_table responsive=»yes»]
| Individual: | Agrupados: |
| h1 {color:red;}
p {color:red;} |
h1, p {color:red;}
|
[/su_table]
See the Pen
selectores by Alberto (@alnuper)
on CodePen.
Agrupar los selectores para dar estilos, es la manera más correcta de trabajar con ellos.
A la hora de agrupar los selectores, hay que tener especial cuidado en escribirlos todos correctamente, ya que un error en alguno de ellos y no se aplica los estilos a ninguno.
Tipos de Selectores en CSS
En CSS existen diferentes tipos de selectores los cuales vamos a ver con más detalle:
Selectores de Tipo:
Estos son los selectores que incluyen algún elemento de HTML
h1{…}, p{…}, ol{…}, etc.
Selectores de Clase y de ID:
Son los selectores que aplican estilos a las clases y a las ID.
Definimos una clase en un elemento HTML cuanto le agregamos el atributo «class» con el nombre de la clase.
<p class=»canica»>Hola Soy un párrafo de la clase «canica»</p>. De esta manera al párrafo le añadimos la clase canica.
Para aplicar estilos a la clase canica debemos indicárselo con su selector, que en este caso es .canica (el nombre de la clase precedido de un punto)
Definimos una ID en un elemento HTML cuanto le agregamos el atributo «id» con el nombre de la id.
<p id=»bola»>Hola Soy un párrafo con la id «bola»</p>. De esta manera al párrafo le añadimos la id bola.
Para aplicar estilos a la clase canica debemos indicárselo con su selector, que en este caso es #bola (el nombre de la ID precedido de un #)
See the Pen
by Alberto (@alnuper)
on CodePen.
Puede haber varios elementos distintos con la misma clase, pero no puede haber varios elementos con el mismo ID. Un ID identifica únicamente a un elemento en cuestión.
.canica{color:red;} aplica el color rojo a todos los elementos de la clase canica.
p.canica{font-weight:bold;} aplica negrita solamente a los párrafos de la clase canica, a ningún otro elemento de la clase canica como podría ser el h1
Selectores de Atributo:
Selecciona los elementos según tengan algún tipo de atributo.
<input type=»button» value=»Enviar» name=»boton_enviar»>
input[name=»boton_enviar»]{
color:red;
}
Los elementos input con el atributo nombre = boton_enviar aplicarán el color rojo
See the Pen
selector atributo by Alberto (@alnuper)
on CodePen.
Selectores de pseudoclases:
Estos selectores aplican estilo a ciertos estados de los elementos HTML. Por ejemplo la pseudoclase :hover selecciona el elemento de HTML solamente cuando se pasa el ratón por encima.
<a href=»https://google.es»>ir a Google</a>
a:hover{color:blue;} aplica el estilo color azul al texto cuando se pase el ratón por encima
Aquí puedes ver las pseudoclases utilizadas en CSS
Selectores de pseudoelementos:
estos selectores aplican estilos a una parte del elemento HTML. Por ejemplo ::first-line selecciona la primera línea de un párrafo y ahí es donde aplica el estilo.
p::first-line {color:red;}
See the Pen
pseudos by Alberto (@alnuper)
on CodePen.
Aquí puedes ampliar conocimientos y conocer los pseudoelementos que se utilizan en CSS
Selectores descendientes:
Estos seleccionan descendientes de selectores con el fin de ajustar más la selección dentro de HTML.
Cuando seleccionamos descendientes directos se utiliza el operador hijo (>).
p > span {color:red;} Colorea de rojo los elementos <span> hijos directos de un párrafo.
h3 span {color:green;} Colorea de verde cualquier <span> contenido en un h3 sea directo o no
See the Pen
selectores combinados by Alberto (@alnuper)
on CodePen.
Como puedes ver solamente cambia a rojo el color en el primer párrafo, donde el <span> en hijo directo del párrafo. En el segundo párrafo ya no es hijo directo, ya que el <span> está dentro de una etiqueta <strong>.
En el caso de la etiqueta h3, el estilo se aplica a cualquier <span> contenido dentro del h3, sea hijo directo o no lo sea. En el segundo h3 el <span> está dentro de unas etiquetas <em> y también lo colorea de verde.
Por último está el selector universal (*) asterisco, y selecciona todos los elementos del documento o documento padre. Se suele utilizar al principio del CSS para inicializar márgenes, tamaños de textos, etc.
