Selectores CSS y jQuery (II). Selectores compuestos.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

Continuamos en este artículo la guía de referencia que iniciamos en el anterior post de esta serie. En esta ocasión vamos a contemplar los selectores compuestos.

Realmente, no se trata de un tipo especial de selectores, sino de combinaciones entre selectores simples, que nos permitirán que una recla CSS o una instrucción de jQuery pueda ser aplicada a determinados elementos del documento web, según donde se encuentren situados en el contexto de la página. Por esta razón, en algunos libros se les llama selectores de contexto.

Además, cuando avancemos en estos artículos verás que lo que aquí aprenderemos podrá combinarse con lo que veremos más adelante.

AGRUPACIONES

Cuando queremos aplicar las mismas reglas CSS a varios elementos de la página, podemos poner sus selectores simples en la misma declaración, separados por comas. Por ejemplo, supongamos lo siguiente:

Esto haría que las reglas definidas se apliquen a todos los titulares h1, a todos los contenedores definidos con span y a todos aquellos elementos (párrafos, titulares, contenedores, etc) que tengan aplicada la clase miContenedor.

SELECTORES DESCENDENTES

Se emplean para referirse a elementos que están anidados dentro de otros elementos. Supongamos que tenemos el siguiente fragmento HTML:

Y ahora, en nuestro archivo CSS, nos encontramos lo siguiente:

Esto afectará a los elementos span que estén dentro de un párrafo. En nuestro ejemplo, afectará a los dos primeros span, que son los que están anidados en un párrafo. En cambio, no afectará al titular h1, porque, aunque esté dentro de un párrafo, esta etiqueta no está referenciada en la regla CSS. Tampoco afectará al tercer elemento span, ya que no está anidado en un párrafo.

SELECTOR DE HIJOS

Esta combinación es muy parecida a la anterior, pero con una diferencia de matiz importantísima: solo se afecta a los elementos que son hijos directos de otro. Vamos a suponer el siguiente fragmento HTML:

Ahora, en nuestro CSS, tenemos lo siguiente:

Esto afectará a los elementos h2 que están directamente dentro de div. En nuestro ejemplo, afectará a los subtitulares primero y segundo. El tercero no se verá afectado porque, aunque está dentro de div, no es hijo directo, sino que, a su vez, está anidado dentro de un elemento p. Es este último el que es hijo de div. El cuarto subtitular tampoco se verá afectado, ya que no está dentro de un div, ni como hijo, ni como nada.

La diferencia entre este selector y el que hemos comentado antes nos permite ver, con toda claridad, que el anindamiento de distintos elementos establece una jerarquía en los contenidos de la página, y que dicha jerarquía puede ser empleada para referenciar elementos con toda la precisión que necesitemos.

SELECTORES ADYACENTES

Se emplean para referenciar elementos que, en el documento web, están a continuación de otro. Supongamos el siguiente fragmento HTML:

Y ahora vamos a nuestro CSS y nos encontramos lo siguiente:

Esta regla afectará, únicamente, a los elementos p que se encuentren, directamente, a continuación de un elemento h2. En nuestro ejemplo, afectaría a los párrafos primero y quinto, que son los que cumplen el requisito. Los demás, no están directamente a continuación de un h2, sino de otros elementos p, por lo que no cumplen con la definición especificada.

SELECTORES DE ATRIBUTOS

Estos selectores tienen ya un poco más de complejidad aparente, si no estás familiarizado con ellos. Se refieren a elemento que tienen un atributo determinado. Supongamos el siguiente fragmento de HTML:

Cómo puedes ver se trata de un formulario tan simple que resulta ramplón, pero nos vale perfectamente para nuestro ejemplo. En nuestro archivo de estilos tenemos definida la siguiente regla CSS:

Como ves, hemos referenciado los elementos input y, entre corchetes, hemos puesto el nombre del atributo id. Esto hará que la regla CSS se aplique a los elementos de tipo input que tengan declarado el atributo id. En nuestro ejemplo, esto afectaría a los campos nombre y correo, pero no a los demás campos del formulario.

Pero aún podemos afinar un poco más. Podemos, por ejemplo, referirnos a los elementos que tengan declarado un atributo concreto, con un valor específico. Por ejemplo, supongamos la siguiente declaración CSS:

Esto afectaría a los campos que tienen el atributo type con el valor text, lo que, en nuestro ejemplo, se refiere a nombre, correo y ciudad. Los demás campos (los botones de radio y el botón de envio) no se ven afectados ya que, aunque tienen declarado el atributo type, este no tiene el valor text. Observa que el valor va entre comillas (que pueden ser simples o dobles).

AFINANDO LOS SELECTORES DE ATRIBUTOS

Dentro de lo que son los selectores de atributos, podemos afinar más aún. Imagina el siguiente framento HTML:

Ahora nos encontramos en el archivo CSS la siguiente regla:

Vemos que esta forma de referencia el valor de un atributo es parecida a la anterior. La diferencia está en la virgulilla de ñ que aparece a la iquierda del operador =. Esto hace que nos estemos refiriendo a los elementos de tipo input que tengan declarado el atributo class y que, al menos uno de los valores de dicho atributo sea campo_obligatorio. Por lo tanto, en nuestro ejemplo, estamos referenciando los campos nombre, correo y password.

Por último, tenemos el operador |=. Esto se refiere a campos que tengan el atributo asignado y que dicho atributo empiece por el valor especificado, seguido de lo que sea. Un uso típico el el atributo lang, que puede ir seguido de una clave de idioma, un guion y una clave de país. Así, por ejemplo, suponte la siguiente declaración CSS:

Esto afectará a todos los elementos de la página que tengan declarado el atributo lang, y cuyo valor empiece por "es-" (español). Así pues, se referira a aquellos elementos cuyo valor de lang sea "es-ES", "es-AR", "es-PE" o "es-MX", por ejemplo.

EL ATRIBUTO TYPE EN jQuery

jQuery nos permite abreviar el selector cuando nos referimos a un campo (un elemento de tipo input) de un determinado tipo (con un valor determinado en el atributo type). Así pues, mira la siguiente selección:

$("input [type='text']").-----

Esto es equivalente a:

$(":text").-----

Si bien al principio es un poco confuso, en cuanto te familiarizas con esta notación resulta extremadamente cómoda.

RESUMEN

En este artículo hemos conocido los selectores compuestos, que son los más básicos que podemos emplear en una hoja de estilos, o en una referencia en jQuery. A modo de resumen, incluimos la siguiente tabla:

SELECTORES COMPUESTOS
TIPO DE SELECTOR EJEMPLO COMENTARIOS
Agrupaciones h1, span, .miContenedor Cuando se ponen varios selectores independientes separados por comas, se hace referencia a todos los elementos del documento HTML que respondan a cualquiera de los selectores. En el ejemplo, todos los elementos h1, span, o con la clase miContenedor. Por supuesto, si hubiera elelementos que cumplan con más de uno de los selectores, también están incluidos. Es decir, si tenemos un elemento declarado como <span class="miContenedor"> también se ve afectado.
Selectores descendentes p span Se refiere a todos los selectores referidos en el segundo lugar que estén anidados, directa o indirectamente, dentro de los selectores referidos en el primer lugar. En el ejemplo nos referimos a todos los elementos span que estén anidados dentro de un elemento p, ya sea directa o indirectamente.
Selectores de hijos p>span Se refiere a los elementos que están anidamos dentro de otro, siempre que estén anidados directamente. En el ejemplo, nos referimos a los elementos span que están anidados en el primer nivel dentro de un elemento p. Si hubiera un span dentro de un div y este, a su vez, dentro de un p, este span no se vería afectado.
Selectores adyacentes div+p Se refiere a todos los elementos que están justo a continuación de otro. En el ejemplo, a un elemento p que estén justo a continuación de un div. Solo afectará al primer elemento detras de un div, si este es p. Si detrás de un div hubierá, por ejemplo, un h1, no se verá afectado. Si encontramos un elemento p detrás de dicho h1, tampoco. Solo si el elemento p está justo a continuación del div.
Selectores de atributo *[name], *[type="text"], *[class~="campo_obligatorio"], *[lang|="es"] Afectará a los elementos que tengan asignado un atributo, o que tengan asignado un atributo con determinado valor, o que el valor del atributo contenga la secuencia especificada.

Po supuesto, los selectores indicados pueden combinarse de la forma que necesitemos para cubrir todos los elementos que nos haga falta referenciar. En el próximo artículo seguiremos ampliando la lista de selectores para referirnos a distintos elementos de un documento web.

     

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *