1
00:00:01,199 --> 00:00:08,320
¿Cómo seleccionamos los elementos para después aplicarles a esos concretamente unas características visuales?

2
00:00:08,900 --> 00:00:15,919
Pues, en primer lugar tenemos selectores de tipo E, o tipo etiqueta, ¿de acuerdo?

3
00:00:16,039 --> 00:00:18,719
Donde a una etiqueta se le aplica unas características.

4
00:00:19,579 --> 00:00:25,300
Dentro de estos hay uno muy especial que es el asterisco, que dice todos los elementos de la página.

5
00:00:25,300 --> 00:00:30,359
Si quisiéramos que todos los elementos tuvieran un rojo, pues ponemos simplemente asterisco.

6
00:00:30,359 --> 00:00:33,259
después tenemos los selectores de clase

7
00:00:33,259 --> 00:00:36,159
que pueden ir asociados a una etiqueta

8
00:00:36,159 --> 00:00:38,119
como en este caso p.aviso

9
00:00:38,119 --> 00:00:41,600
o directamente .aviso

10
00:00:41,600 --> 00:00:44,520
y cualquier elemento que lo tenga se le va a aplicar

11
00:00:44,520 --> 00:00:46,420
esto es equivalente a .aviso

12
00:00:46,420 --> 00:00:48,299
es equivalente a asterisco .aviso

13
00:00:48,299 --> 00:00:52,020
porque se va a aplicar a cualquier etiqueta que exista

14
00:00:52,020 --> 00:00:56,100
tenemos algunos de tipo id

15
00:00:56,100 --> 00:01:00,179
aunque es verdad que hay algunos elementos que se les aconsejan

16
00:01:00,179 --> 00:01:04,260
también son útiles otras veces, con lo cual no voy a decir yo que esto no se utilice

17
00:01:04,260 --> 00:01:08,140
porque a veces es muy cómodo que un elemento concreto tenga un identificador

18
00:01:08,140 --> 00:01:12,200
se puede directamente aplicarse una etiqueta, aunque tiene poco sentido

19
00:01:12,200 --> 00:01:15,459
puesto que los identificadores son únicos, no se pueden repetir

20
00:01:15,459 --> 00:01:18,620
por lo cual lo más lógico es directamente poner

21
00:01:18,620 --> 00:01:22,420
almohadilla y el nombre de identificador

22
00:01:22,420 --> 00:01:24,939
entonces eso solamente vale para ese aviso

23
00:01:24,939 --> 00:01:27,680
menos sentido todavía tiene esto de a este disco

24
00:01:27,680 --> 00:01:33,340
almohadilla aviso, porque solamente debería haber un identificador aviso

25
00:01:33,340 --> 00:01:37,019
después tenemos elementos descendentes

26
00:01:37,019 --> 00:01:42,379
si se escriben dos etiquetas que están seguidas, una etiqueta E y una etiqueta F

27
00:01:42,379 --> 00:01:50,680
los características que indiquemos dentro se aplican a la segunda etiqueta

28
00:01:50,680 --> 00:01:52,780
aunque haya algunas intermedias

29
00:01:52,780 --> 00:01:56,159
entonces imaginemos que tenemos un div

30
00:01:56,159 --> 00:01:59,540
que dice, un div al cual vamos a decir que el borde

31
00:01:59,540 --> 00:02:03,120
es de color rojo, de 3 píxeles y sólido

32
00:02:03,120 --> 00:02:05,719
es decir, esta cajita que estamos viendo aquí

33
00:02:05,719 --> 00:02:09,860
que tiene un margen y tiene un margen interno

34
00:02:09,860 --> 00:02:11,979
el padding es el margen interno

35
00:02:11,979 --> 00:02:15,159
bueno, pues este es nuestra imagen

36
00:02:15,159 --> 00:02:18,819
entonces podemos decir que los párrafos

37
00:02:18,819 --> 00:02:22,379
que están dentro de este div

38
00:02:22,379 --> 00:02:24,300
sean de color rojo

39
00:02:24,300 --> 00:02:26,719
vemos que estos párrafos de aquí siguen negros

40
00:02:26,719 --> 00:02:29,039
esto de aquí es una lista

41
00:02:29,039 --> 00:02:31,120
esto de aquí es un adres

42
00:02:31,120 --> 00:02:34,860
y efectivamente todo lo que está dentro de este div

43
00:02:34,860 --> 00:02:38,280
que es un párrafo, está en color rojo

44
00:02:38,280 --> 00:02:42,000
así podemos meter varios niveles

45
00:02:42,000 --> 00:02:44,759
por ejemplo, dentro de una lista el párrafo que hay

46
00:02:44,759 --> 00:02:47,439
dentro del div, dentro de la lista y dentro del párrafo que hay

47
00:02:47,439 --> 00:02:48,620
este ejemplo de aquí

48
00:02:48,620 --> 00:02:53,280
¿De acuerdo? Este es un orden en el que va una cosa dentro de otra.

49
00:02:53,800 --> 00:03:09,560
Si incluimos el signo de mayor, esto afecta a los elementos de esta segunda etiqueta que están contenidos dentro de la primera, pero no afecta a las etiquetas intermedias que hay entre ellos.

50
00:03:09,560 --> 00:03:23,900
Es decir, tiene que haber una relación directa. Aquí tenemos el mismo caso anterior, la única diferencia, el caso no anterior, sino el caso que teníamos aquí, la única diferencia es que aquí hemos introducido ese mayor, este mayor de aquí.

51
00:03:23,900 --> 00:03:28,180
Entonces vemos que efectivamente div y dentro p ha funcionado

52
00:03:28,180 --> 00:03:30,500
Div y dentro p directamente ha funcionado

53
00:03:30,500 --> 00:03:36,860
Pero este párrafo ya no es div p, es un div li p

54
00:03:36,860 --> 00:03:38,379
Por lo tanto este no lo afecta

55
00:03:38,379 --> 00:03:44,580
Es decir, tiene que estar inmediatamente, tienen que ser hijos este elemento del anterior

56
00:03:44,580 --> 00:03:52,460
Si se escriben dos etiquetas pero con un más

57
00:03:52,460 --> 00:03:57,400
las propiedades afectan únicamente a los elementos con la segunda etiqueta

58
00:03:57,400 --> 00:04:00,240
que van justo, justo después de ese elemento

59
00:04:00,240 --> 00:04:03,919
entonces, si hiciéramos este mismo ejemplo con div p

60
00:04:03,919 --> 00:04:10,280
esto se aplicaría justo al párrafo que está inmediatamente detrás del div

61
00:04:10,280 --> 00:04:13,120
exactamente este que hay aquí

62
00:04:13,120 --> 00:04:22,500
con este carácter, el carácter, no sé, que está al lado del 4 habitualmente

63
00:04:22,500 --> 00:04:31,500
Con este carácter lo que hacemos es que las propiedades afectan únicamente a los elementos de la misma etiqueta

64
00:04:31,500 --> 00:04:35,040
Que van después de un elemento con la primera etiqueta

65
00:04:35,040 --> 00:04:38,279
Y ambos tienen que ser hermanos

66
00:04:38,279 --> 00:04:43,259
Entonces si ponemos div p, div y este carácter p

67
00:04:43,259 --> 00:04:46,040
Pues entonces lo que estamos diciendo es

68
00:04:46,040 --> 00:04:50,000
Este era el primero, pues afecta al segundo que es hermano

69
00:04:50,000 --> 00:04:53,939
Este era el primero y afecta al segundo, que es hermano.

70
00:04:55,379 --> 00:05:02,660
Bueno, también podemos, en caso de que haya atributos, seleccionar elementos propios del atributo.

71
00:05:02,800 --> 00:05:04,920
Por ejemplo, vamos a ver varios casos que hay.

72
00:05:06,120 --> 00:05:16,199
P class, es decir, solamente vamos a transformar en mayúsculas aquellos que tienen un atributo de tipo class.

73
00:05:16,199 --> 00:05:20,199
Este primero está claro que tiene P1 porque está en rojo

74
00:05:20,199 --> 00:05:22,579
Este segundo tiene P2 porque está en azul

75
00:05:22,579 --> 00:05:24,379
Y este podría no tener nada

76
00:05:24,379 --> 00:05:25,120
¿De acuerdo?

77
00:05:25,680 --> 00:05:30,160
Entonces solamente los dos que tienen clase se les pone en mayúscula

78
00:05:30,160 --> 00:05:31,319
Lo vemos claramente

79
00:05:31,319 --> 00:05:35,459
Podemos incluso poner de varios tipos

80
00:05:35,459 --> 00:05:42,560
Quiero que los párrafos que tienen la clase P1, P2 puedan transformarse

81
00:05:42,560 --> 00:05:52,639
Entonces, P1 es de color rojo, P2 es de color azul, y en mayúsculas son aquellos que tienen P1 y P2 en ese orden.

82
00:05:53,180 --> 00:06:00,980
Entonces, este es un párrafo con clase P1 y P2 en ese orden, y este es un párrafo que tiene P2 y P1.

83
00:06:01,439 --> 00:06:05,100
Con lo cual, el único que está en mayúsculas es este de aquí.

84
00:06:05,100 --> 00:06:13,519
Con esta expresión, lo que queremos decir es todos los atributos que contienen este valor

85
00:06:13,519 --> 00:06:19,680
Es decir, si tuviéramos P1, P2, P3 y pusiéramos P2, pues esos que tienen ese valor

86
00:06:19,680 --> 00:06:25,120
Mientras que con esta expresión de aquí, lo que queremos es cómo empiezan

87
00:06:25,120 --> 00:06:28,259
El atributo comienza con este valor

88
00:06:28,259 --> 00:06:31,000
Esto, por ejemplo, valdría para el idioma

89
00:06:31,000 --> 00:06:33,560
es-es mayúscula

90
00:06:33,560 --> 00:06:34,120
por ejemplo

91
00:06:34,120 --> 00:06:37,540
o n-us

92
00:06:37,540 --> 00:06:39,720
etcétera, es decir, todos los que empiezan

93
00:06:39,720 --> 00:06:41,360
de esta manera