Css enésimo hijo: hover ~ first-child {...} - html, css, hover, css-selectores

Estoy tratando de cambiar el primer hijo, cuando paso el segundo hijo. ¿Cómo haces esto solo con html y css?

(Con la tilde / ~ parece que puedo seleccionar childeren hacia abajo en el código html, pero no hacia arriba. ¿Tengo que usar un selector diferente para subir?)

Grtz

<div id="container">
<div id="box1"></div>
<div id="box2"></div>
</div>

<style>
#box1 {
height: 100px;
width: 100px;
background-color: red;
}

#box2 {
height: 100px;
width: 100px;
background-color: lime;
}

#box2:hover ~ #box1 {
height: 300px;
width: 300px;
background-color: yellow;
}

</style>

Respuestas

2 para la respuesta № 1

Los selectores generales de hermanos, esto es lo que expresa la tilde, solo seleccionarán a los hermanos siguiendo (no precediendo) el elemento emparejado.

Los elementos representados por las dos secuencias.compartir el mismo padre en el árbol de documentos y el elemento representado por la primera secuencia precede (no necesariamente de manera inmediata) al elemento representado por la segunda secuencia.

Referencia: http://www.w3.org/TR/css3-selectors/#general-sibling-combinators

---

En su caso, podría haber una posibilidad única de CSS para archivar esto. En realidad dos ...

Oportunidad 1

Sobre los padres :hover, cambia los niños.

#container:hover div:first-child {
background-color: #cff;
}

En su caso, esto requiere. #container ser display: inline-block;De lo contrario, el cuadro rojo también cambiaría, al desplazar el área vacía hacia ambos cuadros.

Compartimiento: http://jsbin.com/dilitucije/1

Funciona en todos los navegadores modernos y en la mayoría de los navegadores antiguos también.

Oportunidad 2

Usaría flexbox con un orden definido para revertir la representación de ambos elementos. Dado que el orden de representación de los elementos se invierte pero el orden de DOM no, esto funciona.

CSS:

.reversed {
display: flex;
flex-direction: column-reverse; /* reverse rendering */
}

#container div:hover:first-child ~ div {
background-color: #cff;
}

Explicación de las reglas de Flexbox:

• utilizar Flexbox (gran explicación, Especificación W3C)
• ordene los artículos en filas (el contenedor es un "column"), invierta el orden de los elementos dentro del .reversed contenedor (el primer nodo DOM se representa en último lugar, el último nodo DOM se representa primero)

Agrega la clase a tu #container

<div id="container" class="reversed">...</div>

Compartimiento: http://jsbin.com/piyokulehe/1

Trabaja en FF 34, Chrome 39, también debería funcionar en al menos IE 11 (probablemente no IE10).

Actualizar:

• Arreglado mal row-reverse (el ejemplo usa column-reverse, coincide con su requerimiento)
• Eliminado innecesario justify-content (ya que los elementos se representan en filas, esto no es necesario)
• Explanaition añadida a la solución Flexbox

---

0 para la respuesta № 2

Para lograr esto, el elemento debe ser el elemento secundario del elemento o ir después del elemento desplazado.

El elemento cuyos estilos se necesitan cambiar debe ser el descendiente del elemento desplazado o viene junto a él para trabajar

---