< Return to Video

CSS Selecting by class

  • 0:00 - 0:02
    Miremos nuestra página
  • 0:02 - 0:05
    tiene estos títulos principales
  • 0:05 - 0:08
    tiene este párrafo que describe a los conejos
  • 0:08 - 0:11
    y ahora de hecho tiene múltiples párrafos,
  • 0:11 - 0:13
    con la letra de mi canción favorita sobre conejos
  • 0:14 - 0:18
    La última vez, nosotros dimos estilo al primer párrafo usando el id
  • 0:18 - 0:21
    Pero ahora que yo tengo múltiples párrafos con letras de canciones,
  • 0:21 - 0:24
    yo quiero que todos tengan ese fondo de color amarillo
  • 0:25 - 0:28
    ¿Como podriamos hacer eso usando lo que sabemos hasta el momento?
  • 0:28 - 0:30
    La primera cosa que aprendimos como hacer
  • 0:30 - 0:33
    fue seleccionar todas las etiquetas de un tipo particular,
  • 0:33 - 0:35
    tal como con el selector 'p'
  • 0:35 - 0:39
    pero eso coloreó todos los párrafos, no solo los párrafos con letras de canciones
  • 0:39 - 0:41
    Nosotros necesitamos algo mas específico.
  • 0:42 - 0:45
    Despues nosotros aprendimos como seleccionar etiquetas con un id particular,
  • 0:45 - 0:48
    como seleccionando el párrafo con el id
    "rabbit-song".
  • 0:48 - 0:51
    pero eso solo seleccionó el primer párrafo
  • 0:51 - 0:54
    Nosotros no podemos adicionar ese id a los otros párrafos
  • 0:54 - 0:58
    porque no nos es permitido usar el mismo id en múltiples etiquetas
  • 0:58 - 1:00
    si nosotros queremos seleccionar los otros párrafos
  • 1:00 - 1:03
    nosotros tendriamos que dar nuevos IDs a cada uno de ellos
  • 1:03 - 1:06
    (como "song-lyrics2",
    y "song-lyrics3"),
  • 1:06 - 1:07
    porque cada id debe ser único
  • 1:07 - 1:10
    y entonces nosotros tendriamos que adicionar reglas para cada uno de ellos
  • 1:10 - 1:12
    Podriamos hacer eso, pero, eso es mucho trabajo
  • 1:12 - 1:15
    y cada vez que nosotros adicionaramos un nuevo verso a la canción,
  • 1:15 - 1:17
    tendríamos que recordar adicionar otro ID al HTML
  • 1:17 - 1:19
    y otro ID a las reglas de CSS
  • 1:19 - 1:23
    y si nosostros adicionaramos cientos de versos, eso solo sería agotador
  • 1:23 - 1:24
    bueno, adivina que?
  • 1:24 - 1:27
    Hay una mejor manera, y esta es llamada "clases".
  • 1:28 - 1:29
    una clase es basicamente:
  • 1:29 - 1:32
    un modo de asignar un elemento particular a un grupo
  • 1:32 - 1:35
    y tu puedes asignar tantos elementos como tu quieras a un grupo.
  • 1:35 - 1:40
    Para adicionar una clase, necesitamos adicionar un atributo "class", tal como lo hicimos con los IDs
  • 1:40 - 1:45
    Primero, borraré este ID, dado que voy a reemplazarlo
  • 1:45 - 1:48
    Ahora, yo he ubicado mi cursor en el comienzo de la etiqueta '',
  • 1:48 - 1:53
    yo agregaré un espacio, y escribiré: class ="
  • 1:53 - 1:55
    Ahora necesitamos inventarnos un nombre para la clase
  • 1:55 - 1:57
    uno que sea descriptivo
  • 1:57 - 2:00
    llamemoslo "song-lyrics".
  • 2:00 - 2:02
    yo he tecleado eso allí dentro
  • 2:02 - 2:04
    ¿ que otros elementos deberian tener este nombre de clase?
  • 2:04 - 2:06
    bien, todos los otros párrafos con letras de canciones,
  • 2:06 - 2:09
    asi que, iremos hacia abajo en la página
  • 2:09 - 2:13
    y adicionaremos el atributo a cada una de las clases de párrafos
  • 2:13 - 2:15
    ("song-lyrics")
  • 2:15 - 2:18
    Bien, grandioso. Ahora, estamos listos para agregar la regla en CSS
  • 2:18 - 2:21
    asi que volvemos a arriba a nuestra etiqueta ''
  • 2:21 - 2:25
    y borramos el selector de id que teniamos antes,
  • 2:25 - 2:26
    porque estamos reemplazandolo.
  • 2:26 - 2:29
    y ahora necesitamos dar con nuestro selector de clase
  • 2:29 - 2:34
    bien, para comenzar un selector de clase, usamos un periodo, un punto.
  • 2:34 - 2:39
    luego, escribimos el nombre de la clase adelante: song-lyrics,
  • 2:39 - 2:47
    y entonces solo hacemos lo de siempre: llaves, propiedad, color, y valor.
  • 2:47 - 2:48
    Ta-da!
  • 2:48 - 2:51
    Todas las letras de canciones ahora tienen fondos amarillos.
  • 2:51 - 2:55
    ¿Que pasaría si nosotros escribimos está s en mayúscula?
  • 2:55 - 2:56
    No funciona,
  • 2:56 - 2:59
    porque los nombre de clases distinguen entre mayúsculas y minúsculas
  • 2:59 - 3:02
    es importante cuales letras están en mayúsculas y cuales en minúsculas
  • 3:02 - 3:04
    tal como con los IDs.
  • 3:04 - 3:09
    ¿Que pasaría si nosotros usamos el signo numeral(#) en vez de un periodo(.)?
  • 3:09 - 3:10
    No funciona,
  • 3:10 - 3:13
    porque entonces el buscador piensa que "song-lyrics" es un ID,
  • 3:13 - 3:16
    y cuando este no puede encontrar algo en el atributo ID de "song-lyrics"
  • 3:16 - 3:18
    este se rinde.
  • 3:18 - 3:25
    ¿Que pasaría si ponemos espacios en nuestros nombres de clases?
  • 3:25 - 3:27
    bien, eso tampoco funciona
  • 3:27 - 3:30
    porque las clases no pueden tener espacios
  • 3:30 - 3:32
    y como encontraremos mas adelante
  • 3:32 - 3:36
    un espacio significa algo muy especifico en el mundo de CSS
  • 3:36 - 3:39
    Asi que, simplemente lo compondremos como estaba.
  • 3:39 - 3:41
    Una vez mas:
  • 3:41 - 3:43
    cuando queremos adicionar una clase,
  • 3:43 - 3:46
    nosotros ideamos un nombre para la clases,
  • 3:46 - 3:49
    y lo adicionamos a nuestro atributo en HTML
  • 3:50 - 3:51
    luego escribimos una regla de estilo
  • 3:51 - 3:55
    comenzando con un periodo(.) y luego escribiendo el nombre de clase
  • 3:56 - 3:59
    y ahora tu CSS puede tener clase!
Title:
CSS Selecting by class
Video Language:
English
Duration:
04:00

Spanish subtitles

Revisions