Hola, hoy vamos a hablar de selectores avanzados. Hasta este punto, cuando hemos estado escribiendo nuestras reglas, hemos estado escribiendo nuestras reglas para un tipo específico de etiqueta. Hemos estado diciendo h1 o p o h2. Así que realmente nos hemos centrado en una cosa que cubre todos los diferentes elementos de ese tipo. Pero, ¿y si no quieres darle estilo a todos los enlaces, solo a algunos de ellos? ¿ O no quieres darle estilo a todas tus listas, solo quieres darle estilo a algunas de ellas? Bueno, ahora vamos a hablar de este tipo de selectores avanzados que nos permitirán hacer precisamente eso. CSS te va a dar tantas opciones que en esta conferencia voy a tratar de cubrir tantas como pueda, pero todavía va a ser de ti ir y buscar un poco más por tu cuenta como las necesites. Así que comencemos con los selectores CSS que siguen el DOM. Si recuerda que el modelo de objetos de documento es cómo el navegador divide la página en una estructura similar a un árbol. Así que de esta manera, el navegador realmente sabe si un párrafo viene directamente después de una etiqueta h1 o si dos párrafos son hermanos en la misma sección. Vamos a utilizar eso para darle estilo a ciertas partes de su página. Entonces, los selectores descendientes son una forma de decir, oye, si estás dentro de una etiqueta de navegación, quiero que peines todos los enlaces que están dentro de la etiqueta de navegación. En lugar de hacerlas todas, sólo esas. Si quieres ser aún más específico, puedes usar los selectores de niños. Esta regla es muy similar, excepto que dice, todos los enlaces a deben ser lo que llamamos descendientes directos del enlace de navegación. Si tiene un párrafo ahí y tiene algunos enlaces allí, ignore eso. Necesitan estar directamente debajo el uno del otro. El último es hermano adyacente. Esa no es una que realmente use mucho en mi propia codificación, pero quería hacerle saber qué es porque hay una muy buena posibilidad de que lo vea si está mirando el código de otras personas. Cómo funciona el hermano adyacente es que los elementos deben ser lo que llamamos el mismo nivel y seguir el uno al otro. Entonces, si tiene una sección que tiene un h1 y luego una lista ordenada, serían hermanos. Si tuviera un h1 y luego algunas otras cosas y esa lista ordenada estuviera dentro de un párrafo, no funcionaría de esa manera. A continuación, vamos a hablar de lo que llamamos selectores de identificación. se utilizan para identificar un solo elemento en el DOM. La forma en que funcionan los identificadores es que entrarías, y dirías, en tu HTML, algo en las líneas de id igual a encabezado, o id igual a pie de página es uno que solían usar mucho. A continuación, en la hoja de estilo, utilizando el símbolo de la libra, puede identificar cuáles desea aplicar estilo. Así que en este momento, hay un pequeño movimiento, pero está creciendo un poco, para salir del uso de id de CSS. Dicen que realmente no tiene sentido usar eso porque mucha gente realmente usa esta identificación para JavaScript y cosas por el estilo. Pero de nuevo, esto es algo que vas a estar viendo mucho, así que quiero presentarte a él. Así que veamos un ejemplo muy rápido aquí solo en la pantalla de cómo funciona. En mi HTML, seguiría adelante y pondría mi fuente, mi etiqueta alt, pero también ID="MainLogo». Luego, en mi hoja de estilo, usando el símbolo # junto con el nombre de identificación, el navegador sabrá, oh, cada vez que vea una de esas imágenes, quiero asegurarme de agregar este borde y este margen. Los selectores de clase son similares a los identificadores, pero la diferencia es que las clases pueden aplicarse a un rango de elementos, no solo a un elemento particular en el DOM. Por lo tanto, piensa en imágenes en miniatura o en los medios de comunicación de iconos sociales. Es esta idea que, sabes qué, quiero ser capaz de diseñar un gran grupo de cosas de la misma manera, pero no quiero necesariamente ponerlas a todas de esa manera. No quieres que todas tus imágenes sean miniaturas, pero quieres que muchas de ellas lo sean. Escribirías este código de una manera muy similar. Aquí en mi HTML, tengo class="pulgar», class="pulgar», class="pulgar», class="pulgar». Y en mi CSS, en lugar de usar el #, debe asegurarse de usar el punto o punto, junto con el nombre de la clase, y luego puede darle cualquier regla. Y de esta manera, la página va a pasar y saber que, además de cualquier estilo que acaba de poner en las imágenes, también desea este estilo para las miniaturas. Entonces, solo para intentar ayudarlo a que sea un poco más claro, ¿cuál es la diferencia entre usar clases e identificadores? Bueno, primero, quieres asegurarte de conocer la sintaxis. El período es para las clases, y la libra es para los identificadores. No puede estropear esto, porque el navegador no lo solucionará si coloca lo incorrecto delante de su clase o nombre de identificación. Quieres recordar que las clases se pueden usar varias veces. Tiene sentido en su código HTML ver class="thumb», class="thumb», class="thumb» porque no se supone que sea una parte específica de la página. Con los identificadores, debe ser único, solo debe ver id igual, por ejemplo, encabezado, que ni siquiera estamos usando una vez. Solo debería ver id="sección principal» una vez. Así que de nuevo, pensemos en imágenes y barras de navegación. Es muy común que quieras formatear numerosas, pero no todas las imágenes de la misma manera. Y usarías clases para eso. Donde puede usar una identificación, estoy seguro de que ha estado en algunos lugares donde en la página web, ve la barra de navegación, y la página en la que está actualmente tiene un estilo ligeramente diferente. Y eso tiene sentido porque solo puedes estar en una página a la vez, y es por eso que puedes elegir usar el id. Así que sigamos adelante y pasemos por un ejemplo rápido usando esa barra de navegación. Así que aquí hay un archivo HTML de muestra, donde todo lo que he hecho es poner en cuatro enlaces que ni siquiera van a ninguna parte. He comentado la hoja de estilo solo para que puedas ver cómo se vería sin ningún estilo. Puedes ver, tengo mi Casa, Intereses, Currículum, Aficiones, y tengo un enlace adicional aquí abajo que llamé muy mal aquí. Así que sigamos adelante y tratemos de agregar un poco de estilo usando estos selectores avanzados. Ve por aquí. Puedes ver que he usado el elemento secundario de, en realidad, solo una especie de descendiente de, hey, todos los enlaces que están en la barra de navegación, quiero darle un estilo diferente, quiero darles un color de fondo diferente, un ancho diferente, cosas como esas. Además, cualquier cosa que sea actual de clase, quiero hacerlo incluso diferente de cualquier otro enlace o cualquier otra cosa que hayamos visto de esa manera. Así que sigamos adelante y descomentemos la hoja de estilo. Guárdalo. Ve de esto a esto. Puede ver que solo los enlaces que están dentro de mi barra de navegación están diseñados. Este se quedó igual. Y el que tengo class="current» se ve diferente de los demás. Así que es muy simple usar estas cosas, solo necesitas saber acerca de ellas. A medida que sus páginas se avancen, querrá reducir el alcance de algunas de las reglas. Sólo queremos aplicarlos a ciertas cosas. Y una de las anotaciones que puedes usar para eso es el punto. Entonces, en su hoja de estilo, en realidad tendría p.main. Esto significa ir y encontrar todos los párrafos que están usando la clase principal. O es posible que tenga cabecera img.special. Esto significaría encontrar todas las imágenes que tienen imagen especial clásica que pertenecen en el encabezado. Es sólo una forma de reducir realmente lo que se está diseñando. Por el mismo lado, también puede, lo que llamamos, ampliar el alcance. Por lo tanto, digamos que hay algún tipo de estilo que desea aplicar tanto al encabezado como al pie de página, o a las secciones y los artículos. No es un problema. Lo que haces es simplemente escribir el elemento e incluir una coma allí para que lo sepa. Así que como una revisión rápida. Y esto es algo de mucho antes. Debe pensar en lo que sucede cuando hay varias reglas para el mismo selector. Entonces, es posible que tenga este aquí con el párrafo donde tiene ciertas cualidades que quiere compartir entre los párrafos h1, el id main y el especial de clase. Pero más tarde, si quieres tener un estilo adicional para un párrafo, siempre y cuando lo pongas en algún lugar debajo, se anulará y combinará con cualquier cosa que esté más arriba. Entonces, a menos que una regla tenga el signo de exclamación importante después de ella, siempre usa la última que vio, junto con las anteriores que no entran en conflicto. Además de los selectores de elementos y los diferentes selectores de relaciones DOM, también tenemos algunos más de los que quiero hablar brevemente. El primero es el selector universal, que es la estrella o el Shift ocho en su teclado. Lo que esto hace es que aplicará su estilo a cada elemento de la página. Es absolutamente una locura. No voy a hacerlo. Voy a dejar que lo hagas, pero adelante y pongas una estrella, y luego el estilo, tal vez borde, alrededor de cada elemento. Afecta a todo lo que hay en tu página. A veces, es bueno para la depuración. El siguiente que podría querer pensar en usar es lo que llamamos selectores de atributos. En lugar de ir en las etiquetas, usted va en los atributos que van dentro de las etiquetas. Entonces, en este caso, seguiría adelante y querría diseñar cada enlace donde tenga href="info.html», y haré un ejemplo rápido de eso en solo un segundo. Pero antes de hacerlo, quería mencionar dos más que veremos más adelante, que son pseudo-clases y pseudo-elementos. Sólo otro nivel de distinguir sólo ciertas cosas que desea diseñar en su página. Pero primero, sigamos adelante y veamos el uso de estos selectores de atributos. Entonces, la forma en que funcionan los selectores de atributos es que buscan en el DOM elementos que tienen el atributo que está buscando. Así, por ejemplo, es posible que desee buscar todas las imágenes que usan archivos gif o todas las imágenes que tienen texto alternativo vacío o tal vez todos los enlaces que van a sitios gubernamentales o sitios sin fines de lucro o sitios educativos. Es muy fácil para nosotros encontrarlos y seguir adelante y darles un estilo un poco diferente. Cómo lo hacemos es que usamos operadores para que coincidan con las diferentes partes del texto alternativo que estás buscando. Así que aquí arriba, en lo que llamamos la intercalación, va a coincidir con el principio. Entonces, en este caso, coincidiría con todos los enlaces que comienzan con http://umich, y no importa cómo termine. El siguiente con el signo del dólar va a coincidir exactamente con el final. Va a encontrar todos los archivos que terminen en .png. También tenemos el comodín, donde vas y diciendo que si ves umich en cualquier parte de cualquier hiper referencia en absoluto, aplica esta regla. Así que lo que vamos a ver es que vamos a ver un archivo que tiene diferentes enlaces y cada uno tiene un tipo diferente de extensión que queremos darle un estilo diferente. Muy bien. Así que lo que tengo aquí es solo una lista de enlaces. No hay clases. Nada especial en estos, que va a diferentes sitios universitarios, organizaciones, sitios gubernamentales, y si usted echa un vistazo, por defecto, sólo va a aparecer como sus enlaces azules tradicionales con subrayado, el texto justo allí. Pero lo que quiero hacer es entrar y decir, ¿sabes qué, todos los que terminan en .org? Hazlos de un color. Todos los que son .edu, otro color, y todos los que terminan en .gov, un tercer color. Veamos cómo se ve. Aquí, se puede ver que sin que yo tenga que poner ninguna información dentro de las etiquetas mismas, el navegador las ha coloreado el color adecuado. Vale, acabo de cubrir un montón de cosas en un video muy corto. Tienes que darte cuenta de que estas ideas se van a fusionar. Vas a usar clases, vas a usar identificaciones, vas a usar atributos. Y lo importante que quiero que sepas es que cuando agregas todas estas cosas juntas, el orden en que escribes clases y diferentes identificadores en tu texto no importa. No importa si usted tiene especial temprano oscuro o oscuro temprano especial. Lo que realmente importa es el orden en que escribas tus reglas en tu hoja de estilo. Los navegadores siempre van a empezar a la parte superior y aplicar cada regla. Ahora, la buena noticia de esta conferencia es que quiero que te des cuenta de que con el poder de las clases y los identificadores y esta hoja de estilos en cascada es que esto significa que puedes usar hojas de estilo de otras personas para darle estilo a tu código. Y puedes agregar una clase que cambie el único pequeño atributo que tal vez no te gustó al respecto. Puede anular estas hojas de estilo y hacerlas suyas. Solo asegúrate de vincular tu hoja de estilo por última vez. Muy bien, hemos cubierto mucho, y espero no haberte abrumado con el video. Solo quiero que recuerdes que cuando hagamos selectores de tipos y el tipo de cosas que voy a hacer en esta clase es que generalmente los estamos agregando para reducir el alcance de dónde se aplican las reglas. Así que no queremos darle estilo a todo. Sólo queremos darle estilo a ciertas cosas. Un id se utiliza para especificar un elemento específico en una página, y las clases se utilizan para asociar elementos que realmente tienden a tener el aspecto similar. Así que a medida que sigamos, sé que voy a tener algunos ejemplos de código conmigo. Espero que te detengas, salgas de tu portátil, y realmente codificas conmigo para tener una idea de lo poderosas que pueden ser estas cosas diferentes. Gracias.