En este video vamos a hablar sobre algunas otras formas de seleccionar elementos.
Aparte de los tres principales que hemos visto hasta ahora.
Y para recapitular esos tres elementos seleccionamos la
clase y el selector de ID para que el elemento se parezca a la clase Ally con Dot low e ID con el símbolo de arte
o hash, y lo que pongamos dentro apuntará a un ID o una clase o todo elementos de
un tipo.
Entonces, esas son tres maneras posibles de seleccionar elementos, pero hay muchas más.
centrar en cinco aquí y estos cinco son los que creo que son los más importantes, los más comunes.
Y nos vamos a
Pero hay mucho más.
De hecho, hay un artículo al que me he vinculado y la descripción en Tutt's Plus, es un artículo gratuito.
Es realmente genial.
Se llama los 30 selectores de CSSA que debe memorizar y, antes de que cunda el pánico, no
necesita memorizarlos.
Naturalmente, memorizarás los más importantes y los que usamos todo el tiempo.
Pero el objetivo de este artículo es decir que hay al menos 30 buenos que debe conocer.
Por no mencionar si estos son los únicos 30 que debes memorizar, eso todavía es bastante.
Y hay mucho más que este artículo sugiere que no necesita saber.
Entonces, el punto es que hay muchas formas diferentes de hacer esto.
Este artículo destaca 30 de ellos y voy a examinar cinco o seis de los
más importantes.
Así que te recomiendo que leas esto.
Habrá un ejercicio en el siguiente video que abarca una gran cantidad de lo que se cubre en este
artículo, así como lo que cubrimos aquí y nuestro editor de texto.
Entonces tengo un HMO básico.
No voy a seguir el proceso de creación del archivo.
Este no es uno con el que necesites codificar, pero es un aspecto
básico que se ve así cuando tenemos un H1.
Tenemos un enlace que va a Google.
Tenemos una UL con tres aliados.
para y luego otra con tres aliados y luego otros cuatro y luego uno más con tres aliados,
pero cada aliado ahora tiene un enlace y el primero también va a Google como este enlace aquí.
Entonces tenemos una H
Luego, el otro va a Facebook y el último va a leerlo.
Tan simple marcado.
Y luego tengo una hoja de estilo incluida llamada selectores.
SS Así que aquí vamos a completar RC SS Así que el primero del que vamos
a hablar se llama selector D-Star y está con un asterisco y seleccionará todo en la página.
Por lo tanto, esto no es algo que realmente quieras hacer a menudo, pero se ve así.
Y luego, lo que hagamos se aplicará a todos y cada uno de los elementos.
Así que voy a dar a todo un elemento de un píxel gris claro sólido y se puede ver cuando hago
cada elemento en la página del cuerpo H-1 en cada enlace.
Aliado en H para todos.
Entonces, esto no es algo que deba hacer mucho, pero lo verá de vez en cuando.
El próximo es el descendiente Lechter y este usará y verá todo el tiempo.
Entonces, la forma en que funciona el selector descendente es que toma dos o más nombres de etiqueta
o dos o más selectores y los encadena.
que están dentro de un aliado, solo las etiquetas de anclaje dentro de un aliado, no la etiqueta de anclaje que aparece por sí sola.
Así que le daré un ejemplo si quiero seleccionar todas las etiquetas de anclaje
Quiero seleccionar todas las etiquetas de anclaje que son descendientes de un aliado.
Entonces, para hacer eso, la sintaxis se parece al espacio Ally y luego a la etiqueta de anclaje.
Así que esto seleccionará todo lo que sea una etiqueta de edad dentro de un aliado y podríamos continuar con esto.
Si tuviéramos más, también podría reescribir esto como cada etiqueta de anclaje que está dentro de un aliado que está
dentro de una UL, que es lo que tenemos aquí, pero que es redundante en nuestro caso.
Y también podría decir que todas las anclas lo combinan todo con la clase Hola.
Dentro de un aliado, pero no tenemos ningún marcado que coincida con eso.
Entonces, cada etiqueta de anclaje dentro de un aliado.
Y vamos a darle un color rojo y refrescamos.
Y puedes ver que esas tres etiquetas de anclaje son rojas.
Este no ha cambiado.
El siguiente es el selector adyacente.
Entonces, con el selector adyacente que hará es que nos gustará seleccionar elementos que vengan después de
otro elemento.
Por lo tanto, no anidado en el interior como este es un aliado anidado en un pozo.
Nos permite seleccionar un hermano.
Así que vamos a seleccionar todos los ULS que vienen después de una H una y otra vez después de que queremos decir simplemente en el mismo nivel.
Entonces, no se sangra dentro de la horquilla, sino directamente después como un hermano en el mismo nivel de una H
para ello.
Entonces eso se llama el selector adyacente y se ve así.
Vamos a decir la edad cuatro y usted lo hará.
Así que sin la ventaja esto sería todo nosotros dentro y 4 años pero con el plus.
Solo somos nosotros los que somos adyacentes a una edad de 4 años.
Y solo voy a dar un borde, hagamos un rojo sólido de cuatro píxeles y deberíamos ver estas dos UL que
son adyacentes.
Vienen después de esta edad cuatro en el mismo nivel tienen un borde rojo.
Entonces, una más que quiero mostrar y esta también es muy importante se llama
selector de atributos.
Y así el selector de atributos es una forma de seleccionar elementos basados ​​en cualquier atributo.
Entonces, en nuestro caso vamos a hacer una selección basada en el atributo H ref.
Vamos a verificar que vamos a convertir todos los enlaces a Google donde H. F. es Google punto com.
Los vamos a hacer de un color, pero también podría usar esto para seleccionar todas las imágenes de una
fuente en particular o todas las entradas de un tipo en particular, como todas las casillas de verificación o todos los campos de contraseña o algo así.
Entonces, en la sintaxis tecleamos la etiqueta de anclaje y luego los corchetes cuadrados y luego adentro vamos a escribir el atributo
que estamos buscando.
Entonces Tref es igual y luego vamos a hacer los enlaces a Google.
de anclaje con HGF igual a esto y luego le daremos un color, le daremos un fondo azul y podrá
ver estos
dos enlaces.
Así que esto seleccionará cada etiqueta
Este primero va a Google y el segundo va a Google.
Entonces ellos son azules.
Pero los otros dos enlaces no van a Google.
Van a Facebook y lo leen.
Entonces ellos no han cambiado.
o si desea que todas las casillas de verificación se muestren de una manera porque todas las entradas muchas entradas diferentes colorean las entradas de
color y las imágenes de archivo y las contraseñas y correos electrónicos y los botones de envío; todas son una etiqueta de entrada.
Por lo tanto, también podría ver esto realmente o tendrá un tipo de entrada igual a texto si desea que cambie
el estilo de todas las entradas de texto de manera diferente
Entonces, solo para seleccionar por entrada nos va a dar todos los diferentes tipos de entradas.
Por lo tanto, a menudo seleccionamos por tipo.
Regresemos a nuestro selector de referencias de Google.
Entonces hay una más de la que quiero hablar aquí que se llama End of type y la forma en
que funciona el final del tipo es que toma un número como tres o cinco.
Y luego selecciona cada extremo de un elemento específico.
Entonces, si quiero seleccionar cada quinto div o cada segundo aliado o el quinto, el décimo párrafo en una página que podría
usar y de tipo.
Entonces, en este caso, Drona selecciona la UL final y hace algo hasta la final.
Bueno, el tercero.
Digamos que quiero darle un borde diferente o fondo diferente. Seleccionaré Bueno colon y de tipo y
luego un número como tres.
Y luego voy a decir antecedentes.
Y demos un trasfondo obvio como el morado y solo puedes ver el tercero que te has vuelto púrpura.
Entonces esto es útil si quieres seleccionar algo en la página.
Sin embargo, una cosa que debo señalar es la forma en que esto funciona: vayamos a un aliado y cambiemos una
tercera mentira.
Y antes de hacer eso, quiero que imagines lo que crees que va a suceder.
Entonces, se supone que esto debe seleccionar al tercer aliado.
Entonces ese sería este aquí, supongo.
Pero a medida que se actualiza, verá que realmente selecciona cada tercera mentira.
Entonces de cada grupo de aliados seleccionará el tercero.
Y si tuviera un montón más.
Es importante tener en cuenta que todavía es tan poco como el tercero en un grupo dado,
por lo que no es como un tercio volver a seleccionar los espárragos nuevamente y luego los espárragos otra vez, es solo
que en cada grupo de ellos seleccionará el tercero.
Sin embargo, hay una manera de conseguir que seleccione un número par, así puedo seleccionar a todos los demás aliados y hacerlo
de color púrpura como este