css-quiz-double-class-selector.md

👋🏼 Welcome 👋🏼

Instagram | Twitter | LinkedIn

Choose your language 👅

• English
• Spanish

English version 🚀

Considering the following code, What would you see in the browser ?

Click here to see the correct answer and explanation 👀

Correct Answer	Explanation
B	.box .color select all elements with the class name color that are decendents of the element with the class name box, but, .box.color select the element which has a class name box and also a class name color (Like <div class="box color"></div>).

Explanation based on 👉🏼 Multiple Class / ID and Class Selectors | CSS Tricks

Code:

HTML:

<div class="box">
  <div class="size color"></div>
</div>

CSS:

.size {
  width: 100px;
  height: 100px;
}

.box .color {
  background: yellow;
}

.box.color {
  background: pink;
}

Spanish version 🚀

Considerando el siguiente código, ¿Qué verías en el navegador?

Haz click aquí para ver la respuesta correcta y su explicación 👀

Respuesta correcta	Explicación
B	El selector .box .color selecciona los elementos con clase color que sean descendientes del elemento con clase box, en cambio, el selector .box.color selecciona el elemento que tenga la clase box y también la clase color (Algo como <div class="box color"></div>).

Explicación basada en 👉🏼 Multiple Class / ID and Class Selectors | CSS Tricks

Código completo:

HTML:

<div class="box">
  <div class="size color"></div>
</div>

CSS:

.size {
  width: 100px;
  height: 100px;
}

.box .color {
  background: yellow;
}

.box.color {
  background: pink;
}

Cool, gracias me ayuda un monton a repasar una que otra cosa ya que hacer estilos en css me parece mas complejo que en flutter
En que haces los diseños? estan hermosos

Creo que la B, no estoy seguro si .box.color sea una manera valida de llamar esas dos clases. Yo siempre lo hice de la manera .box .color