Con el objetivo de aprender a manipular el DOM mediante JavaScript y jQuery, es fundamental comprender qué es un selector y para qué me sirve. Si bien existen diferentes tipos de selectores, en esta ocasión, utilizaremos los selectores básicos para interactuar con distintos elementos HTML y ver cómo funcionan.
¿Qué es un selector y para qué me sirve?
Un selector es una estructura que establece una condición, la cual define sobre qué o cuales elementos del DOM vamos a aplicar determinadas reglas que encontraremos dentro del bloque de declaración de dicho selector. Algunas de las situaciones en las que podemos llegar a utilizar selectores, puede ser cuando queremos seleccionar de forma clara y precisa un elemento del DOM y enlazarlo con una hoja de estilos CSS, o también podemos utilizarlos para manipular elementos del DOM mediante JavaScript o jQuery.
Selectores Básicos de CSS
Los selectores son la primera regla de la estructura CSS definida. Estos nos ayudan a indicar que todos los elementos que coincidan con la regla establecida, se vean a ver afectados por las condiciones dentro del bloque de declaración. Existe una gran variedad de selectores, con lo cual podemos seleccionar con una gran precisión a la hora de estilar algún elemento, a continuación veremos algunos selectores básicos.
Selector universal:
Consiste en seleccionar todos los elementos del documento utilizando el caracter *.
*{ ... Reglas a aplicar ... }Por ejemplo: Seleccionar todos los elementos del documento. En el documento html: < body> < section>...< /section> < form> < label>...< /label> < input ...> < /form> < /body>En el documento CSS: *{ text-align: center; background-color: blueviolet; ... }
Selector de tipo:
Consiste en seleccionar todos los elementos del documento que coincidan con el nombre especificado utilizando el nombre del elemento.
nombreElemento{ ... Reglas a aplicar ... }Por ejemplo: Seleccionar todos los elementos section del documento. En el documento html: < body> < section>...< /section> < form> < label>...< /label> < input ...> < /form> < /body>En el documento CSS: section{ width: 400px; font-family: 'Calibri'; ... }
Selector de Clase:
Consiste en seleccionar todos los elementos del documento que coincidan con el nombre de la clase especificada utilizando un valor introducido en el atributo de clase de cada elemento precedido por un punto.
.nombreClase{ ... Reglas a aplicar ... }Por ejemplo: Seleccionar todos los elementos que tengan la clase "pnt-formulario" del documento. En el documento html: < body> < section>...< /section> < form class="pnt-formulario"> < label>...< /label> < input ...> < /form> < /body>En el documento CSS: .pnt-formulario{ box-shadow: 7px 13px 37px #000; border-radius: 12px; ... }
Selector de ID:
Consiste en seleccionar un único elemento del documento que coincida con el valor de id especificado utilizando el valor asignado al elemento en el atributo id precedido por un #.
#valorID{ ... Reglas a aplicar ... }Por ejemplo: Seleccionar el elemento cuyo ID es "pnt-id" del documento. En el documento html: < body> < section>...< /section> < form class="pnt-formulario"> < label id="pnt-id">...< /label> < input ...> < /form> < /body>En el documento CSS: #pnt-id{ margin-top: 50px; display: none; ... }
Selector de atributo:
Consiste en seleccionar todos los elementos del documento que coincidan con, poseer determinado atributo, o si el valor de determinado atributo empieza, termina o contiene un determinado valor.
[nombreAtributo]{ ... Reglas a aplicar ... }Por ejemplo: Seleccionar todas los elementos que tengan el atributo "[placeholder]" En el documento html: < body> < section>...< /section> < form class="pnt-formulario"> < label id="pnt-id">...< /label> < input [placeholder]="..." ...> < /form> < /body>En el documento CSS: [placeholder]{ font-size: 30px; color: blue; ... }
Selectores Combinadores de CSS
Ocurre a veces, que dentro de nuestro documento, necesitamos ser aun mas específicos para seleccionar algún elemento, entonces CSS nos brinda la posibilidad de combinar selectores con la idea de ser cada vez mas detallados cuando nos referimos uno de estos. A continuación veremos algunas relaciones entre elementos y luego unos ejemplos con cada uno.
Agrupador Descendiente
Consiste en seleccionar todos los elementos del documento que esten dentro de un elemento determinado, vale aclarar que no es necesario que sea hijo directo.
elementoContenedor elementoContenido{ ... Reglas a aplicar ... }Por ejemplo: Seleccionar todos los elementos p que esten dentro de un elemento label del documento. En el documento html: < body> < section>...< /section> < form class="pnt-formulario"> < label id="pnt-id">...< /label> < span>...< /span> < p>...< /p> < input [placeholder]="..."...> < /form> < /body>En el documento CSS: label p{ text-align: center; background-color: blueviolet; ... }
Agrupador Hermanos Adyacentes
Consiste en seleccionar todos los elementos que estén inmediatamente después de un elemento determinado al mismo nivel de jerarquia, y se los relaciona utilizando el caracter +.
elementoAnterior + elementoInmediatamentePosterior{ ... Reglas a aplicar ... }Por ejemplo: Seleccionar todos los elementos input que esten inmediatamente por debajo de un elemento label y al mismo nivel de jerarquia del documento. En el documento html: < body> < section>...< /section> < form class="pnt-formulario"> < label id="pnt-id">...< /label> < span>...< /span> < p>...< /p> < input [placeholder]="..."...> < /form> < /body>En el documento CSS: label + input{ text-align: center; background-color: blueviolet; ... }
Agrupador general de hermano
Consiste en seleccionar todos los elementos del documento que se encuentren despues de un elemento determinado, no necesariamente inmediatamente despues, y se los relaciona utilizando el caracter ~.
elementoAnterior~ elementoPosterior{ ... Reglas a aplicar ... }Por ejemplo: Seleccionar todos los elementos p que esten despues de un elemento span del documento. En el documento html: < body> < section>...< /section> < form class="pnt-formulario"> < label id="pnt-id">...< /label> < span>...< /span> ... < p>...< /p> < input [placeholder]="..."...> < /form> < /body>En el documento CSS: span ~ p{ text-align: center; background-color: blueviolet; ... }
Agrupador de Hijo
Consiste en seleccionar todos los elementos del documento que se encuentren directamente dentro de un elemento determinado, y se los relaciona utilizando el caracter >.
elementoContenedor > elementoContenido{ ... Reglas a aplicar ... }Por ejemplo: Seleccionar todos los elementos input que sean hijos de un elemento form del documento. En el documento html: < body> < section>...< /section> < form class="pnt-formulario"> < label id="pnt-id">...< /label> < span>...< /span> ... < p>...< /p> < input [placeholder]="..."...> < /form> < /body>En el documento CSS: form > input{ text-align: center; background-color: blueviolet; ... }