soy Kseso y esto EsCSS

Selector Css de ancestro y precedentes "funcional".

Selector Css de ancestro y precedentes "funcional".

·Por Kseso ✎ 4

Dentro de los selectores y pseudoselectores que define el actual css hay una imposibilidad o carencia a día de hoy: el que haga posibles actuar sobre los elementos precedentes.
Esto es, el selector de ancestros y de precedentes.
Bien es cierto que el último documento del grupo de trabajo de la W3C relativo a los selectores ya lo incluye. Es el famoso "Selectors level 4", el origen de la falsa (hoy) creencia de la existencia de Css4, de la que ya he hablado.

Lamentablemente, es algo que está en un estadio demasiado inicial y a día de hoy, que yo sepa, ningún navegador le da soporte.
Pero como con todo, el que no exista no quiere decir que no se pueda conseguir, mejor dicho, emular, dicho comportamiento. Lograr, empleando sólo Css, cambiar la propiedades de un elemento que aparece antes en el DOM al actuar, :hover por ejemplo, en uno posterior.

Un caso real

Vamos con una simple lista:

<ul class="acordeon"> <li></li> <li></li> <li></li> <li></li> </ul>

La típica situación de una lista para conformar un acordeón (slider), en la que inicialmente cada elemento | li | tenga un tamaño y el que reciba el foco aumente, decreciendo todos los demás.
Y su css inicial.

ul.acordeon { position: relative; width: 90%; height: 100px; margin: 0 auto; padding: 0; overflow: hidden; } ul.acordeon > li { margin: 0; width: 25%; /*tamaño inicial*/ height: 100%; float: left; transition: .7s;/*animamos el cambio de tamaño*/ }

Con los selectores Css actuales no hay forma de que haciendo :hover sobre el 3º li tanto el 1º como el 2º cambien en algo.
Así que este es el punto que necesita un enfoque distinto. Algo tan sencillo de lograr con l siguiente declaración:

ul.acordeon:hover > li { width: 15%; }

Será la propia lista al recibir el puntero la que haga que sus hijos cambien el tamaño. Por lo que a continuación sólo tenemos que lograr que el hijo que reciba el puntero sea el que crezca para ocupar todo el espacio que queda libre.

ul.acordeon > li:hover { width: 55%; }

Y todo el rollo anterior para lograr lo siguiente:

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso