div> p + div [id * = 'header'] - Si vieras este desorden mezclado de selectores en el CSS de alguien, ¿podrías descifrarlo?
Si no, ¡entonces querrás leer este manual sobre los selectores de funky CSS que deberías saber!
Una educacion defectuosa
Al igual que muchos tipos de CSS autodidactas, mi educación fue improvisada de un millón de fuentes diferentes. Leí artículos, seguí los tutoriales y experimenté hasta que me dolió la cabeza para llegar a un punto en el que pudiera sacar un diseño complejo y lograr el estilo que quiero sin demasiados problemas.
Sin embargo, con el tiempo poco a poco comencé a darme cuenta de que carecía de una comprensión adecuada de uno de los elementos más básicos y esenciales para trabajar con los selectores de CSS. Claro, sabía cómo apuntar a una clase, ID o enlace, pero a menudo veía fragmentos de código con selectores que me parecían completamente extraños.
Después de descartar estas prácticas de codificación confusas durante tanto tiempo, decidí sentarme realmente y aprender sobre los selectores de CSS. No solo cambió la forma en que codifico, sino que me ayudó drásticamente a interpretar y aprender de CSS que otros escriben.
Ciertamente no soy el primero en escribir sobre los selectores de CSS y este artículo no agregará nada revolucionario a la discusión. Pero si eres como yo, un programador autodidacta con una educación moteada, este podría ser el artículo que aclara algunas de tus mayores confusiones cuando te quedas asombrado del código críptico de los demás.
Conocer a la familia
Antes de aprender sobre los selectores de CSS complejos. Necesitas entender algunas cosas sobre la jerarquía de HTML. Has escuchado estos términos antes, pero es hora de pensar realmente en ellos y asegurarte de comprender cómo funcionan.
La forma en que explicamos y hacemos referencia a la estructura de un documento HTML es mediante el uso de la metáfora de un árbol genealógico. Hay padres, hijos, hermanos, descendientes y ancestros. Para ver qué significa cada uno, usemos el código simple a continuación.
Nuestro div contiene dos elementos de párrafo y un ancla. Todos de estos son descendientes de la div, que ocupa la posición raíz en este caso. Un niño es un descendiente directo de un padre. Entonces, en el ejemplo anterior, ambos párrafos son hijos del div, pero el ancla no lo es. En cambio, es un niño del segundo párrafo.
De manera similar, si volvemos a subir al árbol, el div tiene una relación diferente con los elementos. El div es el padre de las etiquetas de párrafo, pero un antecesor de la etiqueta de anclaje.
La relación final es la de los hermanos, también conocidos como hermanos adyacentes. Al igual que en su familia, los hermanos comparten un padre. Entonces, en el ejemplo anterior, los dos párrafos son hermanos porque el elemento principal de ambos elementos es el div. El ancla no tiene hermanos porque es el único hijo del párrafo.
¿Lo tengo?
La metáfora de la familia puede ser realmente confusa, pero solo si lo piensa demasiado. La terminología es bastante intuitiva y si piensas en el significado literal de la palabra, puedes adivinar lo que significa en términos HTML.
En caso de que aún necesite un poco más de aclaración, reescribamos el ejemplo anterior con contenido que explique la jerarquía de cada elemento.
El selector de niños
Ahora que entendemos cómo funciona el HTML, podemos comenzar nuestra discusión sobre los selectores de CSS, que aprovechan este sistema. Armados con nuestro conocimiento de lo que realmente es un niño HTML, podemos ver el selector de niños CSS.
El selector secundario se representa con el símbolo mayor que:?> Var13 -> ?. Has visto esto en CSS antes, pero puede o no entender realmente cómo funciona.
Esta declaración toma las etiquetas de párrafo que son hijos del div y las convierte en azules. Tenga en cuenta que sólo funciona para el niños De esa div, no necesariamente todos los descendientes. Vamos a explorar esto más a fondo con el siguiente ejemplo.
Digamos que por alguna horrible razón hemos querido cambiar el color del enlace a amarillo. Obviamente, podríamos apuntar al enlace de muchas maneras, pero estamos tratando de aprender sobre el selector de niños, así que ve conmigo. Veamos que pasa si implementamos este CSS:
Vaya, eso no cambió nada! Eso es porque el enlace no es un elemento secundario del div, es un elemento secundario del párrafo. Entonces, si cambiamos ese código para apuntar a cualquier ancla que sea hija de párrafos, logramos nuestro objetivo.
Orden
Ahora que entiende cómo funciona el selector de niños, tenga en cuenta que, como con todo CSS, el orden hace una gran diferencia. Para ilustrar esto, comencemos con esta estructura HTML básica:
Ahora consideremos los siguientes dos fragmentos de CSS. Se ven similares, pero son muy diferentes!
El primer fragmento, hace que todos los párrafos se vuelvan rojos, luego cambia solo los hijos de la raíz div a azul.
El segundo fragmento hace lo contrario, inicialmente apunta a los párrafos secundarios del primer div y los convierte en azules, pero luego cambia. todos de los apartados a rojo. Esto, por supuesto, resulta en tres párrafos rojos.
El segundo ejemplo rompe una regla importante en CSS: ir de lo general a lo específico, no al revés.Desde que comenzamos con una configuración de selector específica que se enfocó solo en dos párrafos y luego nos movimos a un selector general que apuntaba a todos los párrafos, ¡el segundo completamente invalidado el primero!
Encadenamiento
Si realmente quieres volverte loco, puedes encadenar selectores de niños. En el siguiente ejemplo, primero seleccioné los párrafos secundarios de div 3 de example3 y los cambié a azul, luego seleccioné los párrafos que eran hijos de divs que eran además Los hijos de otro div y los cambiaron a rojos.
El selector de hermanos adyacente
Con los selectores de niños todos al cuadrado, necesitamos aprender cómo dirigirse a los hermanos. El selector de hermanos adyacente está representado por el símbolo más:? +? Con él, podemos apuntar a cualquier elemento que sea hermano de cualquier otro elemento. Aquí hay un ejemplo:
En nuestro CSS, usamos el selector de hermanos adyacente, que cambió el segundo y tercer párrafo a rojo. Esto es muy complicado, ¿no? instintivamente, esperaríamos que el primer párrafo también fuera rojo. Después de todo, el primer párrafo está en el mismo nivel del árbol que los dos siguientes y tiene hermanos. Sin embargo, este selector solo se aplica a elementos que están precedidos por algo más. En este caso, solo se dirigirán los párrafos precedidos directamente por un párrafo de hermanos. El primer párrafo de la lista está precedido por el div, por lo que no se cambia.
Con esto en mente, el siguiente código cambiaría el fondo del div anidado a gris porque de hecho está precedido por un párrafo.
Encadenamiento adicional
Al igual que con los selectores de niños, puede encadenar selectores de hermanos adyacentes. El sistema funciona exactamente igual que antes. También puede combinar los dos para una capa adicional de complicación. Aquí es donde nuestro CSS realmente comienza a parecer extraño.
En este ejemplo, nos dirigimos a párrafos que eran hijos de divs que también estaban precedidos directamente por otro párrafo.
El Todopoderoso Asterisco
La pieza final de CSS confuso que quiero revisar es la peor: el asterisco. ¿Sabía que, según el contexto, el asterisco puede referir dos cosas completamente diferentes?
Selector universal
El primer ejemplo de un asterisco en CSS es con el que probablemente esté más familiarizado: el selector universal. Fiel a su nombre, este selector apunta a todos y cada uno de los elementos de la página. Por lo general, vemos que se utiliza en restablecimientos de CSS. Lo siguiente restablece el relleno y el margen en cada elemento.
Puedes llevar esto más lejos y lograr algunos resultados realmente interesantes. Por ejemplo, los siguientes turnos. cada elemento dentro de un div rojo, esto incluye elementos como enlaces que tienen un conjunto de colores predeterminado para otra cosa y no se verían afectados simplemente por apuntar al div.
Además, este fragmento de código se dirige a los párrafos nietos de la división, pero no a los párrafos hijos directos.
Puedes llevar esto tan lejos como desees, los siguientes objetivos son los bisnietos de la div. Puede ver este método de encadenamiento usado frecuentemente en trucos de depuración de CSS.
Selector de valor de atributo de subcadena arbitraria
Ahora, con CSS3, el asterisco también se puede usar para implementar el selector de valor de atributo de subcadena arbitraria, puede extraer ese título al hablar con otros desarrolladores si está tratando de parecer inteligente.
El siguiente código apunta a cualquier div con la palabra? Sección? En el título. Puede ser? Section3? o? section-Four ?, no importa, siempre que contenga la cadena indicada, se aplicarán los estilos posteriores.
Este código se aplicaría a Todos los divs en este HTML:
Selectores de atributos
La última bola curva que te lancé fue un ejemplo de un selector de atributos. En CSS3, los selectores de atributos son tan complicados que merecen su propio artículo. Afortunadamente para usted, tenemos un artículo sobre ese tema.
Selectores de atributos CSS: cómo y por qué debería usarlos
Si eres un nerd como yo, este es un tema realmente fascinante. Es increíble ver todas las herramientas de selección que tiene a su disposición.
Selectores de pseudo clase
Este es otro tema de selección con el que debe familiarizarse y, una vez más, realmente merece una inspección exhaustiva del tema. Al igual que con casi todos los temas de CSS conocidos por el hombre, CSS-Tricks lo tiene cubierto.
Conoce a los selectores de pseudo clase
Conclusión
Con CSS, casi siempre hay más de una forma de apuntar algo. De hecho, a menudo hay media docena de formas. Para cualquiera de los ejemplos anteriores, probablemente pueda nombrar una forma más rápida de apuntar a lo que buscábamos, pero al familiarizarse con el DOM, estos selectores realmente comienzan a ser útiles.
Incluso si nunca se encuentra en necesidad de ellos, es de vital importancia entenderlos porque será Vea los proyectos en los que colabora, los marcos que descarga, los tutoriales que lee y cualquier otro lugar donde encuentre código. ¡Comprender las relaciones de elementos HTML y sus correspondientes selectores de CSS solo puede hacerte un mejor programador!