Cómo usar los selectores de jQuery y CSS, y los conceptos básicos de cómo funcionan

El otro día, estaba entrevistando a alguien que había terminado la certificación de front-end de freeCodeCamp. También se había graduado de un campo de entrenamiento bastante prestigioso, donde los asistentes codificaban de 8 am a 8 pm durante seis semanas seguidas. ¡Ay!

Su capacidad de programación era excelente, pero me sorprendió ver que faltaba su conocimiento en CSS. Y por falta, quiero decir que no sabía cómo seleccionar una clase para aplicar un estilo. Esto no necesariamente se refleja negativamente en él. En todo caso, destaca cómo muchos programadores ven CSS.

Mucha gente piensa que aprender CSS no es importante, ya que los diseñadores normalmente podrán implementar el CSS por usted. Si bien esto es cierto, hay muchas veces que usted (como programador) necesitará saber algo de CSS básico para seleccionar un elemento y decirle que haga algo cuando suceda algo más.

Por ejemplo, Green Sock Animation Platform (GSAP) probablemente sea demasiado programática para estar centrada en el diseñador. Requiere un desarrollador con conocimientos de CSS y programación.

No estoy diciendo que todos los desarrolladores necesiten ser un maestro de CSS. Pero creo que si se va a llamar un desarrollador full-stack, debe conocer los conceptos básicos de CSS. Y lo básico comienza con el selector .

Descargo de responsabilidad: los selectores de jQuery no son en realidad exclusivos de jQuery, en realidad son selectores de CSS. Sin embargo, si eres como yo, aprendiste jQuery antes de aprender correctamente CSS y, por lo tanto, asociaste automáticamente los selectores con jQuery. Aunque este artículo trata sobre los selectores de CSS, también le ayudará si necesita algunas aclaraciones sobre los selectores de jQuery.

El selector de CSS

Siempre encuentro útil jugar con código, así que aquí tienes un CodePen simple para jugar con selectores básicos.

En HTML, hay tres formas de etiquetar o categorizar elementos. La primera forma es la más amplia: por nombre de etiqueta. Por ejemplo, puede seleccionar todos los correos divelectrónicos de su página utilizando el selector simple div. ¡Oye, eso fue fácil!

La segunda forma es probablemente la que más usarás: el classatributo. Puede seleccionar por clase usando un punto ( .), por lo que en el ejemplo anterior, para seleccionar todoelementos con clase sectionque uso .sectioncomo selector.

La tercera forma a menudo se usa en exceso, pero sigue siendo útil, y ese es el idatributo. Las identificaciones deben identificar sus elementos, al igual que su SSN (en los EE. UU.) Puede identificarlo a usted como persona. Eso significa que los ID deben ser únicos en toda la página. Para seleccionar un elemento con una ID específica, usa el hashtag ( #) u octothorpe como me gusta llamarlo. Seleccionar el elemento con el ID de otheruso #other.

Estos son los selectores más básicos. Recordar:

  • seleccionar por nombre de etiqueta (sin prefijo)
  • seleccionar por nombre de clase (prefijo de .)
  • seleccionar por ID (prefijo de #)

Estos tres selectores por sí solos le permitirán seleccionar casi cualquier cosa en su página web.

Prueba 1

  1. ¿Cómo seleccionaría todas las etiquetas de párrafo en la página? (pista: las etiquetas de párrafo son p)
  2. ¿Cómo seleccionaría todos los elementos con la clase de button-text?
  3. ¿Cómo seleccionaría el elemento con ID de form-userinput?

¡No dudes en compartir tus respuestas en los comentarios!

¿Todas las identificaciones deben ser únicas?

Esta es una pequeña digresión que creo que es muy importante. Pero si solo está aquí para aprender a usar los selectores, no dude en pasar a la siguiente sección

Con un nombre como ID, asumiría que cada ID HTML debe ser único o su documento HTML no funcionará. Después de todo, tratar de tener dos constvariables hará que muchos editores te griten, entonces, ¿HTML no gritaría también?

El problema es que HTML no te gritará. De hecho, nadie te dirá que algo anda mal. Puede encontrar un error que se deba a una identificación no única. Pero se volverá loco tratando de averiguar la causa raíz del error, porque es una falla muy sutil.

El ejemplo anterior demuestra por qué tener ID duplicados puede causar un problema en su página web. Primero, en realidad hay dos divs con el ID other. Si comenta los estilos de #other, verá que ambos elementos tienen estilo. Esto podría hacerte pensar, "bueno, ¡puedo usar ID y nombres de clase indistintamente!"

No tan rapido. Si miras en el panel de JavaScript, verás que seleccioné elementos particulares según su etiqueta de elemento: nombre de etiqueta, nombre de clase o ID. Lo notará document.getElementsByTagNamey document.getElementsByClassNamedevolverá una colección de todos los elementos HTML coincidentes. document.getElementByIddevuelve solo el primer elemento HTML que puede encontrar con el ID correspondiente. Puede verificar esto descomentando la getVanillaSelectorsfunción y revisando la consola.

Para complicar aún más las cosas, si usa el querySelectorAllmétodo de JavaScript (que toma un selector de CSS como entrada), obtiene un resultado totalmente diferente.

Y solo para molestarlo, jQuery hace algo diferente a pesar de tener una sintaxis similar a querySelectorAll.

No tengo explicación para el comportamiento diferente. Sin embargo, puedo decirte cómo evitarlo. Estas son mis reglas:

  1. Nunca use identificaciones. En su lugar, utilice classatributos.
  2. Si necesito usar una identificación, ponga un espacio en el nombre de manera que sea única incluso si existe un elemento similar en la página; por ejemplomenu-item-01

A veces, es posible que los formularios y sus campos de entrada deban tener ID. En ese caso, puede seguir la regla número 2. Así es como usaría un espacio de nombres en un formulario para el registro de usuarios:

De esa manera, si tengo dos formularios en la misma página (digamos user-signupy user-signin), se garantiza que tendrán identificaciones únicas. Incluso si los campos de ID de usuario son similares entre los formularios.

Combinando selectores

A veces, un solo selector simplemente no es suficiente. A veces, es necesario obtener todos los divque tienen un nombre de clase section. Otras veces, necesita cada elemento con un nombre de clase sectionque sea un elemento secundario para un divcon ID user-signup. Hay muchas otras combinaciones de selectores posibles.

En esta sección, aprenderá tres formas de combinar selectores y estoy seguro de que se adaptarán al 90% de sus necesidades. Si encuentra que más del 11% de sus necesidades no están satisfechas, venga a quejarse y lo editaré para decir el 89% de sus necesidades :).

Como antes, comencemos con un CodePen:

Combinando selectores para un solo elemento

Bien, primero cubramos la combinación de selectores para un solo elemento. Esto significa seleccionar el elemento que tiene el nombre de etiqueta de x, Y el nombre de clase de y, Y el ID de z. Por supuesto, no necesita los tres, pero puede combinar los tres.

Digamos que queremos seleccionar todos los divs con clase de item. Para ello, combinamos los dos: div.item. Va del más general al más específico de izquierda a derecha. Eso selecciona todas las divetiquetas que TAMBIÉN tienen el nombre de clase item. Es importante tener en cuenta que no hay espacio entre divy .item. Agregar un espacio cambia el selector por completo , como veremos en la siguiente sección.

Si quita el comentario del CSS correspondiente, verá que sectioncon el nombre de clase de itemno se puso rojo. Eso es porque no es una divetiqueta.

Puede hacer este mismo patrón con nombres de clases e ID. Pero si tiene la ID de un elemento, también puede usar la ID. No hay razón para seleccionar una ID con un nombre de clase específico, porque si siguió las reglas de ID anteriores, de todos modos solo tiene un elemento con esa ID.

Pero, sólo por la paridad, aquí está un ejemplo de la selección de la divcon la clase de iteme ID de other: div.item#other. Nuevamente, yendo de izquierda a derecha, va de lo más general a lo más específico.

Lo más probable es que utilice esta sintaxis para seleccionar un elemento que tenga varias clases. Para hacer esto, simplemente separe todas las clases con puntos. Para seleccionar todos los elementos que tienen AMBAS clases itemy section, usarías .item.section. El orden no importa cuando lo hagas de esta manera, por .section.itemlo que también funcionará.

Este único truco le permitirá ser más específico en sus selectores.

El selector de "niños"

La segunda forma en que puedes combinar selectores es usando el selector "secundario", como me gusta llamarlo. Hay dos formas de hacer esto, así que comenzaré con la más general.

Primero, puede seleccionar cualquier hijo de un determinado elemento agregando un espacio. Por ejemplo, para seleccionar todos itemlos #otherelementos secundarios del elemento, sería #other .item. Observe el espacio entre los selectores.

En segundo lugar, puede seleccionar elementos secundarios inmediatos de un determinado elemento utilizando &gt ;. Un "hijo inmediato" de un elemento es uno que tiene solo un nivel de profundidad. En el ejemplo, hay t wo .ielementos contenidos en este he #otelemento, pero uno de t he .ielementos está envuelto en a .wrappor elemento, de modo que uno no es un hijo inmediato.

Para darle una imagen, si colapsa todo debajo del #otherelemento, verá esto:

Esos dos son los únicos hijos directos del #otherelemento. Para seleccionar sólo el hijo directo .itemde #other, tendrá que utilizar #other > .iTEM, que seleccionaría al niño directa, B ut no el undernea th .wrappor. Genial, ¿eh?

Prueba 2

  1. ¿Cómo seleccionaría todas las etiquetas de párrafo que pertenecen a sectionelementos? (pista: las etiquetas de párrafo son p)
  2. ¿Cómo seleccionaría todos los elementos con clase de button-text, que son descendientes de elementos con clase de button?
  3. ¿Cómo seleccionaría el elemento con la clase de form-inputque es un hijo directo de los formelementos?
  4. Pregunta adicional : explique lo que selecciona este selector: header.title > form.user-signup button.button-danger

Como antes, siéntete libre de compartir tus respuestas en los comentarios.

Poniéndolo todo junto, literalmente

Puede combinar selectores combinados. De Verdad. La pregunta de bonificación anterior muestra un ejemplo de ello, pero agregué algunas combinaciones al final del codepen de ejemplo.

Por ejemplo, puede elegir todos los .items que son hijos de divs con clase de parent-itemutilizando div.parent-item .item. ¡Guau!

También puede elegir descendientes directos. Por ejemplo, para seleccionar todos los divs con clase de itemque son descendientes directos de divs con clase de parent-item: div.parent-item > div.item.

Y, por último, sólo para meterse con usted, usted puede caminar por todo el árbol DOM: div.parent-item .coolest-item .item. itemclase que es secundaria a coolest-itemclase que es secundaria a divclase de parent-item.

Tenga en cuenta que, por lo general, no es una buena idea ir más allá de dos o tres niveles de profundidad cuando se anidan los selectores. Luego te adentras en extraños reinos de especificidad que puedes resolver de manera más efectiva al nombrar mejor tus clases de CSS. Pero eso está fuera del alcance de este artículo. Si quieres saber más, avísame y escribiré al respecto.

Bonificación: uso de Chrome DevTools para obtener un selector

Puede usar Chrome DevTools para obtener el selector de cualquier elemento que pueda seleccionar en el DOM. Así es cómo:

  1. Abra Chrome DevTools. Ya que está seleccionando un elemento, continúe y haga clic derecho en el elemento que desea seleccionar y haga clic en "Inspeccionar":

2. Haga clic con el botón derecho en el elemento DOM que desea seleccionar y coloque el cursor sobre "Copiar", luego haga clic en "Selector de copias:"

3. ¡Eso es! El selector que copié, por cierto, está #editor_93 > section > div.section-content > div:nth-child(3) > p.graf.graf — p.graf-after — figure.graf — trailingseleccionado. Puede copiar se lector into document.querySelector o jQuery y obtener el elemento.

¡Esperamos que este artículo haya sido útil! Si te gustó, dame algunas palmadas para que más gente lo vea. ¡Gracias!