-
En esta página web, estamos usando CSS
-
para dar estilo a nuestros '' y a los párrafos
-
de modo que todos los '' sean verdes y todos los párrafos sean púrpuras.
-
Pero, ¿qué pasa si nosotros queremos seleccionar solo el primer '' ?
-
o dar estilo solo al segundo párrafo?
-
Nosotros necesitariamos encontrar una forma de decirle al navegador exáctamente cuales
-
de los elementos estamos seleccionando
-
de modo que este no aplique los estilos a todos ellos, como está ahora.
-
Una forma de hacerlo es seleccionar por ID.
-
Podemos dar a una etiqueta de nuestra página un ID único
-
y luego podemos decirle a CSS,
-
"Escucha: Yo solo quiero aplicar estos estilos al elemento con este ID,
-
no a ninguno de los otros elementos."
-
Para hacer esto, el primer paso es de hecho modificar el HTML
-
para añadir atributos id a las etiquetas que queremos seleccionar específicamente.
-
Comencemos con el segundo párrafo de aquí.
-
Para añadir un atributo id, ponemos nuestro cursor
-
en el comienzo de la etiqueta '' justo después de p,
-
luego añade un espacio, y luego teclea 'id = " '
-
Ahora necesitamos rellenar este atributo id con un valor.
-
¿Qué ID debería darle?
-
Bueno, este debería ser descriptivo y único.
-
Nada más en esta página debería tener el mismo ID.
-
Bueno, dado que esto es una canción sobre conejos, la llamaré rabbits-song.
-
No podemos tener espacios en IDs, asi que si tienen múltiples palabras como esta
-
siempre debes utilizar guiones o guiones bajos.
-
Personalmente, me encantan los guiones.
-
Ahora tenemos una forma de identificar este párrafo únicamente.
-
Entonces podemos añadir una regla CSS enfocandolo.
-
Volvamos a nuestra etiqueta ''
para el segundo paso.
-
Añadiremos una nueva línea, después de la última regla.
-
Recuerda, la primera parte de una regla del CSS es el selector:
-
la parte que le dice al buscador qué seleccionar.
-
En nuestras reglas anteriores, usamos selectores como '' y ''
-
para seleccionar todos los '' y los '' en la página.
-
Ahora para hacer un selector
que solo seleccione elementos
-
con un ID partícular,
-
debemos empezar el selector con un signo #.
-
Eso le dice al navegador que
lo que viene a continuación es un ID.
-
Ahora escribimos nuestra identificación:
rabbits-song.
-
El resto de la regla
es lo mismo que antes.
-
Abrimos y cerramos nuestras llaves,
-
añadimos una propiedad,
como background-color...
-
... y listo! Funcionó!
-
Solo el párrafo de la canción tiene
el color de fondo amarillo,
-
y el primer párrafo
permanece igual.
-
Vamos a hacer esto de nuevo,
para seleccionar el primer ``.
-
¿Puedes recordar el primer paso?
-
Eso es. Necesitamos incluso modificar este HTML
-
para añadir el atributo 'id'.
-
Así que mantenemos nuestro cursor
en la etiqueta inicial,
-
añadimos un espacio, tipo 'id = '
-
a continuación, escribimos un ID muy singular
y descriptiva.
-
Así, "rabbits-info-heading".
-
Bien, el segundo paso.
Retrocedemos a nuestra etiqueta de estilo
-
añadimos una nueva línea,
escribe el signo #,
-
luego nuestro ID, rabbits-info-heading
-
y luego ponemos nuestra propiedad dentro de llaves {
-
background-color: purple;
}
-
Oh! Bien, no funcionó. Umm... ¿Ves lo que estuvo mal?
-
Yo... deletreé de igual forma?
-
rabbits-info-Heading,
rabbits-info-heading...
-
Hmm... se ven casi iguales.
-
Ahora los podemos comparar letra-por-letra
-
para averiguar lo que está mal,
-
pero lo que me gusta hacer es ir abajo
y seleccionar el ID en el HTML,
-
copiarlo, y luego pegarlo aquí para asegurarme que está exactamente igual.
-
Y... funcionó!
-
Mi `` tiene un fondo.
¿Y te has dado cuenta de lo que cambió?
-
Tal vez lo hiciste. Fue la h.
La h usada era una H mayúscula,
-
que el navegador
no la considera como igual.
-
Tiene que ser h minúscula para coincidir en el HTML.
-
Eso es porque los id distinguen mayúsculas de minúsculas.
-
Entonces tienes que deletrearlos de la misma forma en todas partes.
-
Me parece que lo mejor es simplemente usar siempre
minúsculas para cada letra en mis IDs
-
de manera que yo no tengo que pensar en si usé minúsculas o mayúsculas.
-
Bien, ahora permiteme dejarte con una última advertencia:
-
Los IDs deben ser únicos!
-
Si tu tienes dos etiquetas en tu página con el mismo ID,
-
el navegador podría poner estilo en ambas,
pero también podría poner estilo en solo una de ellas.
-
Y tu no quieres dejarlo a la suerte.
-
Lindos, únicos y descriptivos IDs.
