CSS Selecting by class

Miremos nuestra página

tiene estos títulos principales

tiene este párrafo que describe a los conejos

y ahora de hecho tiene múltiples párrafos,

con la letra de mi canción favorita sobre conejos

La última vez, nosotros dimos estilo al primer párrafo usando el id

Pero ahora que yo tengo múltiples párrafos con letras de canciones,

yo quiero que todos tengan ese fondo de color amarillo

¿Como podriamos hacer eso usando lo que sabemos hasta el momento?

La primera cosa que aprendimos como hacer

fue seleccionar todas las etiquetas de un tipo particular,

tal como con el selector 'p'

pero eso coloreó todos los párrafos, no solo los párrafos con letras de canciones

Nosotros necesitamos algo mas específico.

Despues nosotros aprendimos como seleccionar etiquetas con un id particular,

como seleccionando el párrafo con el id
"rabbit-song".

pero eso solo seleccionó el primer párrafo

Nosotros no podemos adicionar ese id a los otros párrafos

porque no nos es permitido usar el mismo id en múltiples etiquetas

si nosotros queremos seleccionar los otros párrafos

nosotros tendriamos que dar nuevos IDs a cada uno de ellos

(como "song-lyrics2",
y "song-lyrics3"),

porque cada id debe ser único

y entonces nosotros tendriamos que adicionar reglas para cada uno de ellos

Podriamos hacer eso, pero, eso es mucho trabajo

y cada vez que nosotros adicionaramos un nuevo verso a la canción,

tendríamos que recordar adicionar otro ID al HTML

y otro ID a las reglas de CSS

y si nosostros adicionaramos cientos de versos, eso solo sería agotador

bueno, adivina que?

Hay una mejor manera, y esta es llamada "clases".

una clase es basicamente:

un modo de asignar un elemento particular a un grupo

y tu puedes asignar tantos elementos como tu quieras a un grupo.

Para adicionar una clase, necesitamos adicionar un atributo "class", tal como lo hicimos con los IDs

Primero, borraré este ID, dado que voy a reemplazarlo

Ahora, yo he ubicado mi cursor en el comienzo de la etiqueta '',

yo agregaré un espacio, y escribiré: class ="

Ahora necesitamos inventarnos un nombre para la clase

uno que sea descriptivo

llamemoslo "song-lyrics".

yo he tecleado eso allí dentro

¿ que otros elementos deberian tener este nombre de clase?

bien, todos los otros párrafos con letras de canciones,

asi que, iremos hacia abajo en la página

y adicionaremos el atributo a cada una de las clases de párrafos

("song-lyrics")

Bien, grandioso. Ahora, estamos listos para agregar la regla en CSS

asi que volvemos a arriba a nuestra etiqueta ''

y borramos el selector de id que teniamos antes,

porque estamos reemplazandolo.

y ahora necesitamos dar con nuestro selector de clase

bien, para comenzar un selector de clase, usamos un periodo, un punto.

luego, escribimos el nombre de la clase adelante: song-lyrics,

y entonces solo hacemos lo de siempre: llaves, propiedad, color, y valor.

Ta-da!

Todas las letras de canciones ahora tienen fondos amarillos.

¿Que pasaría si nosotros escribimos está s en mayúscula?

No funciona,

porque los nombre de clases distinguen entre mayúsculas y minúsculas

es importante cuales letras están en mayúsculas y cuales en minúsculas

tal como con los IDs.

¿Que pasaría si nosotros usamos el signo numeral(#) en vez de un periodo(.)?

No funciona,

porque entonces el buscador piensa que "song-lyrics" es un ID,

y cuando este no puede encontrar algo en el atributo ID de "song-lyrics"

este se rinde.

¿Que pasaría si ponemos espacios en nuestros nombres de clases?

bien, eso tampoco funciona

porque las clases no pueden tener espacios

y como encontraremos mas adelante

un espacio significa algo muy especifico en el mundo de CSS

Asi que, simplemente lo compondremos como estaba.

Una vez mas:

cuando queremos adicionar una clase,

nosotros ideamos un nombre para la clases,

y lo adicionamos a nuestro atributo en HTML

luego escribimos una regla de estilo

comenzando con un periodo(.) y luego escribiendo el nombre de clase

y ahora tu CSS puede tener clase!