WEBVTT

00:00:00.095 --> 00:00:02.336
En esta página web, estamos usando CSS

00:00:02.336 --> 00:00:04.600
para dar estilo a nuestros '' y a los párrafos

00:00:08.670 --> 00:00:08.920
de modo que todos los '' sean verdes y todos los párrafos sean púrpuras.

00:00:09.537 --> 00:00:13.160
Pero, ¿qué pasa si nosotros queremos seleccionar solo el primer '' ?

00:00:13.460 --> 00:00:16.462
o dar estilo solo al segundo párrafo?

00:00:16.716 --> 00:00:19.867
Nosotros necesitariamos encontrar una forma de decirle al navegador exáctamente cuales

00:00:19.867 --> 00:00:21.513
de los elementos estamos seleccionando

00:00:21.513 --> 00:00:24.931
de modo que este no aplique los estilos a todos ellos, como está ahora.

00:00:25.333 --> 00:00:27.945
Una forma de hacerlo es seleccionar por ID.

00:00:28.265 --> 00:00:30.525
Podemos dar a una etiqueta de nuestra página un ID único

00:00:30.525 --> 00:00:32.449
y luego podemos decirle a CSS,

00:00:34.373 --> 00:00:36.297
"Escucha: Yo solo quiero aplicar estos estilos al elemento con este ID,

00:00:36.297 --> 00:00:38.208
no a ninguno de los otros elementos."

00:00:38.455 --> 00:00:41.281
Para hacer esto, el primer paso es de hecho modificar el HTML

00:00:41.281 --> 00:00:45.132
para añadir atributos id a las etiquetas que queremos seleccionar específicamente.

00:00:45.741 --> 00:00:48.371
Comencemos con el segundo párrafo de aquí.

00:00:48.529 --> 00:00:50.896
Para añadir un atributo id, ponemos nuestro cursor

00:00:50.896 --> 00:00:53.415
en el comienzo de la etiqueta '' justo después de p,

00:00:53.415 --> 00:00:58.357
luego añade un espacio, y luego teclea 'id = " '

00:00:58.982 --> 00:01:02.667
Ahora necesitamos rellenar este atributo id con un valor.

00:01:02.812 --> 00:01:04.180
¿Qué ID debería darle?

00:01:04.180 --> 00:01:06.452
Bueno, este debería ser descriptivo y único.

00:01:06.508 --> 00:01:09.229
Nada más en esta página debería tener el mismo ID.

00:01:09.479 --> 00:01:15.080
Bueno, dado que esto es una canción sobre conejos, la llamaré rabbits-song.

00:01:15.422 --> 00:01:19.837
No podemos tener espacios en IDs, asi que si tienen múltiples palabras como esta

00:01:19.837 --> 00:01:22.237
siempre debes utilizar guiones o guiones bajos.

00:01:22.596 --> 00:01:24.717
Personalmente, me encantan los guiones.

00:01:25.650 --> 00:01:28.941
Ahora tenemos una forma de identificar este párrafo únicamente.

00:01:29.016 --> 00:01:31.646
Entonces podemos añadir una regla CSS enfocandolo.

00:01:31.746 --> 00:01:35.479
Volvamos a nuestra etiqueta ''
para el segundo paso.

00:01:35.598 --> 00:01:38.428
Añadiremos una nueva línea, después de la última regla.

00:01:39.478 --> 00:01:43.255
Recuerda, la primera parte de una regla del CSS es el selector:

00:01:43.255 --> 00:01:45.840
la parte que le dice al buscador qué seleccionar.

00:01:46.098 --> 00:01:51.130
En nuestras reglas anteriores, usamos selectores como '' y ''

00:01:51.130 --> 00:01:54.031
para seleccionar todos los '' y los '' en la página.

00:01:54.554 --> 00:01:57.203
Ahora para hacer un selector
que solo seleccione elementos

00:01:57.203 --> 00:01:58.671
con un ID partícular,

00:01:58.671 --> 00:02:00.862
debemos empezar el selector con un signo #.

00:02:01.293 --> 00:02:04.547
Eso le dice al navegador que
lo que viene a continuación es un ID.

00:02:05.147 --> 00:02:08.798
Ahora escribimos nuestra identificación:
rabbits-song.

00:02:09.603 --> 00:02:11.882
El resto de la regla
es lo mismo que antes.

00:02:11.934 --> 00:02:13.722
Abrimos y cerramos nuestras llaves,

00:02:13.722 --> 00:02:17.844
añadimos una propiedad,
como background-color...

00:02:18.364 --> 00:02:20.574
... y listo! Funcionó!

00:02:20.873 --> 00:02:23.934
Solo el párrafo de la canción tiene
el color de fondo amarillo,

00:02:23.934 --> 00:02:26.093
y el primer párrafo
permanece igual.

00:02:26.574 --> 00:02:30.764
Vamos a hacer esto de nuevo,
para seleccionar el primer ``.

00:02:31.133 --> 00:02:32.866
¿Puedes recordar el primer paso?

00:02:33.515 --> 00:02:36.586
Eso es. Necesitamos incluso modificar este HTML

00:02:36.586 --> 00:02:38.145
para añadir el atributo 'id'.

00:02:38.300 --> 00:02:40.693
Así que mantenemos nuestro cursor
en la etiqueta inicial,

00:02:40.693 --> 00:02:43.520
añadimos un espacio, tipo 'id = '

00:02:43.580 --> 00:02:46.691
a continuación, escribimos un ID muy singular
y descriptiva.

00:02:46.791 --> 00:02:49.944
Así, "rabbits-info-heading".

00:02:50.690 --> 00:02:54.043
Bien, el segundo paso.
Retrocedemos a nuestra etiqueta de estilo

00:02:54.043 --> 00:02:57.429
añadimos una nueva línea,
escribe el signo #,

00:02:57.429 --> 00:03:01.840
luego nuestro ID, rabbits-info-heading

00:03:01.840 --> 00:03:04.947
y luego ponemos nuestra propiedad dentro de llaves {

00:03:04.947 --> 00:03:08.625
background-color: purple; 
}

00:03:08.945 --> 00:03:13.260
Oh! Bien, no funcionó. Umm... ¿Ves lo que estuvo mal?

00:03:13.420 --> 00:03:15.279
Yo... deletreé de igual forma?

00:03:15.359 --> 00:03:18.305
rabbits-info-Heading, 
rabbits-info-heading...

00:03:18.485 --> 00:03:21.049
Hmm... se ven casi iguales.

00:03:21.160 --> 00:03:23.374
Ahora los podemos comparar letra-por-letra

00:03:23.374 --> 00:03:25.079
para averiguar lo que está mal,

00:03:25.079 --> 00:03:29.633
pero lo que me gusta hacer es ir abajo
y seleccionar el ID en el HTML,

00:03:29.679 --> 00:03:33.810
copiarlo, y luego pegarlo aquí para asegurarme que está exactamente igual.

00:03:33.887 --> 00:03:35.481
Y... funcionó!

00:03:35.561 --> 00:03:39.825
Mi `` tiene un fondo.
¿Y te has dado cuenta de lo que cambió?

00:03:40.085 --> 00:03:44.474
Tal vez lo hiciste. Fue la h.
La h usada era una H mayúscula,

00:03:44.474 --> 00:03:47.003
que el navegador
no la considera como igual.

00:03:47.103 --> 00:03:50.231
Tiene que ser h minúscula para coincidir en el HTML.

00:03:50.315 --> 00:03:52.850
Eso es porque los id distinguen mayúsculas de minúsculas.

00:03:52.930 --> 00:03:57.143
Entonces tienes que deletrearlos de la misma forma en todas partes.

00:03:57.513 --> 00:04:01.753
Me parece que lo mejor es simplemente usar siempre
minúsculas para cada letra en mis IDs

00:04:01.753 --> 00:04:04.645
de manera que yo no tengo que pensar en si usé minúsculas o mayúsculas.

00:04:05.158 --> 00:04:08.404
Bien, ahora permiteme dejarte con una última advertencia:

00:04:08.404 --> 00:04:10.530
Los IDs deben ser únicos!

00:04:10.648 --> 00:04:13.444
Si tu tienes dos etiquetas en tu página con el mismo ID,

00:04:13.444 --> 00:04:17.835
el navegador podría poner estilo en ambas,
pero también podría poner estilo en solo una de ellas.

00:04:17.962 --> 00:04:20.341
Y tu no quieres dejarlo a la suerte.

00:04:20.451 --> 00:04:23.096
Lindos, únicos y descriptivos IDs.