Problema con CSS a la hora de seleccionar clases

[Diesan Romero]

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:

Código (html4strict) [Seleccionar] Expandir


<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:

Código (css) [Seleccionar] Expandir


.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?

[#!drvy]

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

[Diesan Romero]

Digamos que tengo esto:

Código (html4strict) [Seleccionar] Expandir


<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:

Código (css) [Seleccionar] Expandir


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

casi siempre he marcado la primera

[#!drvy]

Entre las que das, solo funciona la primera.

Saludos

[Orubatosu]

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

[srWhiteSkull]

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?

Código (css) [Seleccionar] Expandir

/* 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 

[#!drvy]

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?

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