Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Duda en sintaxis de código CSS !!!!

Referente al curso JavaScript para web: crea páginas dinámicas, en el capítulo Eventos y lógicas y actividad Adicionando clases y eventos del teclado

por Rafael Zavala
| 51.3k xp | 402 posts

Buen dia Asesores, No entiendo la siguiente nomenclatura en css del siguiente código , sobre todo la referente al codigo:

.tecla.activa, .tecla:active {

}

.tecla {
  background-color: var(--blanco);
  border-radius: 30px;
  box-shadow: 3px 3px 0 var(--gris);
  color: var(--rojo);
  cursor: pointer;
  height: 120px;
  font-size: 1.75em;
  font-weight: bold;
  line-height: 120px;
  text-align: center;
  width: 120px;
}

.tecla.activa,
.tecla:active {
  background-color: var(--rojo);
  border: 4px solid  var(--rojo);
  box-shadow: 3px 3px 0 var(--rojo-oscuro) inset;
  color: var(--blanco);
  outline: none;
}
1 respuesta
por Daysibel.pitter
| 190.9k xp | 766 posts
Instructor

¡Hola Rafael!

Entiendo que tienes dudas sobre la sintaxis del código CSS que estás utilizando en tu proyecto. La nomenclatura que te está generando confusión es la siguiente:

.tecla.activa,
.tecla:active {

}

En este caso, .tecla.activa y .tecla:active son selectores CSS. La primera regla aplica a elementos que tengan ambas clases, es decir, que tengan la clase "tecla" y la clase "activa". Mientras que la segunda regla aplica a elementos que estén en estado activo, es decir, cuando el usuario hace clic sobre ellos.

En resumen, estas reglas están definiendo estilos para elementos que tengan la clase "tecla" y "activa", así como para el estado activo de los elementos con la clase "tecla".

Espero que esta explicación te haya ayudado a aclarar tus dudas. Si necesitas más ayuda, no dudes en preguntar.

Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!