Foro de elhacker.net

Hace unos dias estaba haciendo un examen de CSS y me llamo la atencion algo en particular.

Resulta que la pregunta decia mas o menos asi:

<div class="inicio medio small"></div>
<div class="inicio medio medium"></div>
<div class="inicio medio large"></div>
 

Me preguntaron como es la forma correcta de seleccionar el div del centro y salian alternativas como estas, aunque no se si esten todas:

.inicio.medio .medium {...}
.inicio .medio .medium {...}
inicio medio medium {...}
.inicio.medio.medium {...}

yo siempre elegi la del centro pero me la marcaba mal, alguien sabe la respuesta?

De las respuestas que das, la correcta solo puede ser la 4. Si te fijas, el elemento no esta dentro de otro elemento, es decir son 3 clases para el mismo elemento. En CSS cuando marcas un espacio en el query, se considera que buscas a un hijo dentro del elemento padre, cuando va todo junto, se considera que buscas un elemento que tenga todas esas clases.

Saludos

Digamos que tengo esto:

<header class="header">
  <nav id="header">
    <ul class="items">
      <li class="item">Item 1</li>
      <li class="item">Item 2</li>
      <li class="item">Item 3</li>
    </ul>
  </nav>
</header>

Y quiero elegir todos los elementos li, cual es la correcta:

.header nav li {...}
#header nav li {...}
header #nav li {...}
head nav li {...}

casi siempre he marcado la primera

Entre las que das, solo funciona la primera.

Saludos

De forma generalista como sabes:

# para los elementos seleccionados por ID (únicos)
. para los elementos seleccionados por clase (pueden ser varios)

Luego los selectores descendentes van de "arriba a abajo" pero en realidad solo se deben de usar si tienes la necesidad de seleccionar un objeto muy concreto

Lo que está claro es que son tres clases, las cuales generalmente se definen por separado y no en un solo grupo. Si no que sentido tendría?

/* ejemplo */
.inicio { 
   width: 100%;
}
 
.medio {
   height: 100vh;
}
 
.medium {
   text-align: center; 
}

*Dile al profe que todas están mal y que se busque una nueva profesión XD jajajaj

* es broma  ;)

Ese tipo de preguntas van orientadas a comprobar el conocimiento que tienes sobre las preferencias y reglas de CSS. Tienen poco o ningún sentido aplicadas a nivel deployment, pero dan a entender que tanto sabe alguien de como funcionan las cosas.

Saludos