1
00:00:00,630 --> 00:00:04,510
En este video vamos a hablar sobre algunas otras formas de seleccionar elementos.

2
00:00:04,590 --> 00:00:07,530
Aparte de los tres principales que hemos visto hasta ahora.

3
00:00:08,070 --> 00:00:11,790
Y para recapitular esos tres elementos seleccionamos la

4
00:00:14,790 --> 00:00:27,450
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

5
00:00:27,450 --> 00:00:36,420
o hash, y lo que pongamos dentro apuntará a un ID o una clase o todo elementos de

6
00:00:36,420 --> 00:00:37,780
un tipo.

7
00:00:37,800 --> 00:00:42,290
Entonces, esas son tres maneras posibles de seleccionar elementos, pero hay muchas más.

8
00:00:42,660 --> 00:00:46,560
centrar en cinco aquí y estos cinco son los que creo que son los más importantes, los más comunes.

9
00:00:46,560 --> 00:00:47,310
Y nos vamos a

10
00:00:47,460 --> 00:00:49,020
Pero hay mucho más.

11
00:00:49,230 --> 00:00:54,300
De hecho, hay un artículo al que me he vinculado y la descripción en Tutt's Plus, es un artículo gratuito.

12
00:00:54,330 --> 00:00:55,350
Es realmente genial.

13
00:00:55,350 --> 00:01:00,990
Se llama los 30 selectores de CSSA que debe memorizar y, antes de que cunda el pánico, no

14
00:01:00,990 --> 00:01:01,710
necesita memorizarlos.

15
00:01:01,920 --> 00:01:05,700
Naturalmente, memorizarás los más importantes y los que usamos todo el tiempo.

16
00:01:05,910 --> 00:01:11,520
Pero el objetivo de este artículo es decir que hay al menos 30 buenos que debe conocer.

17
00:01:11,910 --> 00:01:17,030
Por no mencionar si estos son los únicos 30 que debes memorizar, eso todavía es bastante.

18
00:01:17,130 --> 00:01:20,980
Y hay mucho más que este artículo sugiere que no necesita saber.

19
00:01:21,120 --> 00:01:23,590
Entonces, el punto es que hay muchas formas diferentes de hacer esto.

20
00:01:23,610 --> 00:01:28,680
Este artículo destaca 30 de ellos y voy a examinar cinco o seis de los

21
00:01:28,680 --> 00:01:29,270
más importantes.

22
00:01:29,460 --> 00:01:31,300
Así que te recomiendo que leas esto.

23
00:01:31,320 --> 00:01:36,960
Habrá un ejercicio en el siguiente video que abarca una gran cantidad de lo que se cubre en este

24
00:01:36,960 --> 00:01:40,340
artículo, así como lo que cubrimos aquí y nuestro editor de texto.

25
00:01:40,770 --> 00:01:43,060
Entonces tengo un HMO básico.

26
00:01:43,470 --> 00:01:45,920
No voy a seguir el proceso de creación del archivo.

27
00:01:45,960 --> 00:01:51,510
Este no es uno con el que necesites codificar, pero es un aspecto

28
00:01:51,510 --> 00:01:55,190
básico que se ve así cuando tenemos un H1.

29
00:01:55,650 --> 00:01:57,860
Tenemos un enlace que va a Google.

30
00:01:57,960 --> 00:02:00,190
Tenemos una UL con tres aliados.

31
00:02:00,600 --> 00:02:07,350
para y luego otra con tres aliados y luego otros cuatro y luego uno más con tres aliados,

32
00:02:07,350 --> 00:02:14,460
pero cada aliado ahora tiene un enlace y el primero también va a Google como este enlace aquí.

33
00:02:14,460 --> 00:02:15,860
Entonces tenemos una H

34
00:02:16,180 --> 00:02:19,540
Luego, el otro va a Facebook y el último va a leerlo.

35
00:02:19,590 --> 00:02:20,650
Tan simple marcado.

36
00:02:20,970 --> 00:02:23,520
Y luego tengo una hoja de estilo incluida llamada selectores.

37
00:02:23,540 --> 00:02:30,510
SS Así que aquí vamos a completar RC SS Así que el primero del que vamos

38
00:02:30,510 --> 00:02:38,360
a hablar se llama selector D-Star y está con un asterisco y seleccionará todo en la página.

39
00:02:38,730 --> 00:02:43,930
Por lo tanto, esto no es algo que realmente quieras hacer a menudo, pero se ve así.

40
00:02:44,080 --> 00:02:47,930
Y luego, lo que hagamos se aplicará a todos y cada uno de los elementos.

41
00:02:48,750 --> 00:02:57,690
Así que voy a dar a todo un elemento de un píxel gris claro sólido y se puede ver cuando hago

42
00:02:58,260 --> 00:03:02,800
cada elemento en la página del cuerpo H-1 en cada enlace.

43
00:03:02,960 --> 00:03:06,800
Aliado en H para todos.

44
00:03:07,080 --> 00:03:11,260
Entonces, esto no es algo que deba hacer mucho, pero lo verá de vez en cuando.

45
00:03:11,550 --> 00:03:17,970
El próximo es el descendiente Lechter y este usará y verá todo el tiempo.

46
00:03:18,030 --> 00:03:24,390
Entonces, la forma en que funciona el selector descendente es que toma dos o más nombres de etiqueta

47
00:03:24,390 --> 00:03:27,150
o dos o más selectores y los encadena.

48
00:03:27,150 --> 00:03:36,270
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.

49
00:03:36,270 --> 00:03:41,350
Así que le daré un ejemplo si quiero seleccionar todas las etiquetas de anclaje

50
00:03:41,580 --> 00:03:45,860
Quiero seleccionar todas las etiquetas de anclaje que son descendientes de un aliado.

51
00:03:46,170 --> 00:03:53,340
Entonces, para hacer eso, la sintaxis se parece al espacio Ally y luego a la etiqueta de anclaje.

52
00:03:53,970 --> 00:03:59,590
Así que esto seleccionará todo lo que sea una etiqueta de edad dentro de un aliado y podríamos continuar con esto.

53
00:03:59,610 --> 00:04:05,640
Si tuviéramos más, también podría reescribir esto como cada etiqueta de anclaje que está dentro de un aliado que está

54
00:04:05,700 --> 00:04:10,680
dentro de una UL, que es lo que tenemos aquí, pero que es redundante en nuestro caso.

55
00:04:11,460 --> 00:04:16,440
Y también podría decir que todas las anclas lo combinan todo con la clase Hola.

56
00:04:16,560 --> 00:04:20,070
Dentro de un aliado, pero no tenemos ningún marcado que coincida con eso.

57
00:04:20,070 --> 00:04:22,120
Entonces, cada etiqueta de anclaje dentro de un aliado.

58
00:04:22,350 --> 00:04:28,720
Y vamos a darle un color rojo y refrescamos.

59
00:04:29,100 --> 00:04:32,460
Y puedes ver que esas tres etiquetas de anclaje son rojas.

60
00:04:32,490 --> 00:04:34,690
Este no ha cambiado.

61
00:04:35,580 --> 00:04:38,400
El siguiente es el selector adyacente.

62
00:04:38,970 --> 00:04:44,490
Entonces, con el selector adyacente que hará es que nos gustará seleccionar elementos que vengan después de

63
00:04:44,490 --> 00:04:44,980
otro elemento.

64
00:04:45,030 --> 00:04:49,910
Por lo tanto, no anidado en el interior como este es un aliado anidado en un pozo.

65
00:04:50,100 --> 00:04:52,200
Nos permite seleccionar un hermano.

66
00:04:52,350 --> 00:05:01,140
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.

67
00:05:01,200 --> 00:05:07,380
Entonces, no se sangra dentro de la horquilla, sino directamente después como un hermano en el mismo nivel de una H

68
00:05:07,380 --> 00:05:07,970
para ello.

69
00:05:07,980 --> 00:05:11,410
Entonces eso se llama el selector adyacente y se ve así.

70
00:05:11,670 --> 00:05:16,780
Vamos a decir la edad cuatro y usted lo hará.

71
00:05:16,890 --> 00:05:21,920
Así que sin la ventaja esto sería todo nosotros dentro y 4 años pero con el plus.

72
00:05:21,960 --> 00:05:24,810
Solo somos nosotros los que somos adyacentes a una edad de 4 años.

73
00:05:24,990 --> 00:05:33,330
Y solo voy a dar un borde, hagamos un rojo sólido de cuatro píxeles y deberíamos ver estas dos UL que

74
00:05:33,330 --> 00:05:34,080
son adyacentes.

75
00:05:34,080 --> 00:05:40,740
Vienen después de esta edad cuatro en el mismo nivel tienen un borde rojo.

76
00:05:40,920 --> 00:05:45,390
Entonces, una más que quiero mostrar y esta también es muy importante se llama

77
00:05:45,390 --> 00:05:46,170
selector de atributos.

78
00:05:46,410 --> 00:05:51,270
Y así el selector de atributos es una forma de seleccionar elementos basados ​​en cualquier atributo.

79
00:05:51,660 --> 00:05:56,620
Entonces, en nuestro caso vamos a hacer una selección basada en el atributo H ref.

80
00:05:56,970 --> 00:06:01,920
Vamos a verificar que vamos a convertir todos los enlaces a Google donde H. F. es Google punto com.

81
00:06:01,920 --> 00:06:07,350
Los vamos a hacer de un color, pero también podría usar esto para seleccionar todas las imágenes de una

82
00:06:07,350 --> 00:06:15,210
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í.

83
00:06:15,210 --> 00:06:23,250
Entonces, en la sintaxis tecleamos la etiqueta de anclaje y luego los corchetes cuadrados y luego adentro vamos a escribir el atributo

84
00:06:23,250 --> 00:06:24,290
que estamos buscando.

85
00:06:24,540 --> 00:06:32,850
Entonces Tref es igual y luego vamos a hacer los enlaces a Google.

86
00:06:32,850 --> 00:06:40,470
de anclaje con HGF igual a esto y luego le daremos un color, le daremos un fondo azul y podrá

87
00:06:40,650 --> 00:06:41,580
ver estos

88
00:06:44,240 --> 00:06:44,760
dos enlaces.

89
00:06:48,240 --> 00:06:50,530
Así que esto seleccionará cada etiqueta

90
00:06:50,520 --> 00:06:53,650
Este primero va a Google y el segundo va a Google.

91
00:06:53,820 --> 00:06:54,750
Entonces ellos son azules.

92
00:06:54,870 --> 00:06:57,270
Pero los otros dos enlaces no van a Google.

93
00:06:57,270 --> 00:06:59,340
Van a Facebook y lo leen.

94
00:06:59,340 --> 00:07:01,030
Entonces ellos no han cambiado.

95
00:07:01,800 --> 00:07:10,680
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

96
00:07:10,680 --> 00:07:18,600
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.

97
00:07:19,110 --> 00:07:26,370
Por lo tanto, también podría ver esto realmente o tendrá un tipo de entrada igual a texto si desea que cambie

98
00:07:26,370 --> 00:07:30,170
el estilo de todas las entradas de texto de manera diferente

99
00:07:30,420 --> 00:07:34,460
Entonces, solo para seleccionar por entrada nos va a dar todos los diferentes tipos de entradas.

100
00:07:34,500 --> 00:07:37,580
Por lo tanto, a menudo seleccionamos por tipo.

101
00:07:37,620 --> 00:07:42,680
Regresemos a nuestro selector de referencias de Google.

102
00:07:43,650 --> 00:07:48,170
Entonces hay una más de la que quiero hablar aquí que se llama End of type y la forma en

103
00:07:48,270 --> 00:07:51,710
que funciona el final del tipo es que toma un número como tres o cinco.

104
00:07:51,930 --> 00:07:55,710
Y luego selecciona cada extremo de un elemento específico.

105
00:07:55,710 --> 00:08:06,540
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

106
00:08:06,570 --> 00:08:08,390
usar y de tipo.

107
00:08:08,400 --> 00:08:15,120
Entonces, en este caso, Drona selecciona la UL final y hace algo hasta la final.

108
00:08:15,130 --> 00:08:17,570
Bueno, el tercero.

109
00:08:18,210 --> 00:08:29,550
Digamos que quiero darle un borde diferente o fondo diferente. Seleccionaré Bueno colon y de tipo y

110
00:08:30,030 --> 00:08:33,410
luego un número como tres.

111
00:08:33,860 --> 00:08:35,750
Y luego voy a decir antecedentes.

112
00:08:36,080 --> 00:08:45,030
Y demos un trasfondo obvio como el morado y solo puedes ver el tercero que te has vuelto púrpura.

113
00:08:47,400 --> 00:08:51,420
Entonces esto es útil si quieres seleccionar algo en la página.

114
00:08:51,420 --> 00:08:59,700
Sin embargo, una cosa que debo señalar es la forma en que esto funciona: vayamos a un aliado y cambiemos una

115
00:08:59,790 --> 00:09:00,370
tercera mentira.

116
00:09:00,480 --> 00:09:04,120
Y antes de hacer eso, quiero que imagines lo que crees que va a suceder.

117
00:09:04,170 --> 00:09:08,160
Entonces, se supone que esto debe seleccionar al tercer aliado.

118
00:09:08,400 --> 00:09:10,960
Entonces ese sería este aquí, supongo.

119
00:09:11,220 --> 00:09:15,170
Pero a medida que se actualiza, verá que realmente selecciona cada tercera mentira.

120
00:09:15,390 --> 00:09:19,620
Entonces de cada grupo de aliados seleccionará el tercero.

121
00:09:20,210 --> 00:09:24,370
Y si tuviera un montón más.

122
00:09:26,520 --> 00:09:32,070
Es importante tener en cuenta que todavía es tan poco como el tercero en un grupo dado,

123
00:09:32,070 --> 00:09:39,180
por lo que no es como un tercio volver a seleccionar los espárragos nuevamente y luego los espárragos otra vez, es solo

124
00:09:39,210 --> 00:09:41,790
que en cada grupo de ellos seleccionará el tercero.

125
00:09:41,790 --> 00:09:48,690
Sin embargo, hay una manera de conseguir que seleccione un número par, así puedo seleccionar a todos los demás aliados y hacerlo

126
00:09:48,690 --> 00:09:50,370
de color púrpura como este