soy Kseso y esto EsCSS

Emular selector Css de precedente con position 9.8.15

Uso de la propiedad Css "Position" para emular un selector de precedente o ancestro. El padre cambia a un color de fondo diferente al hecer :hover sobre cada hijo.

Emular selector Css de precedente con position

En lo que llega o no el selector Css de ancestro o padre (que más que selector Css parece promesa de político) en el blog ya le he dedicado varios artículos a cómo emularlo.

La cuestión siempre es la misma: lograr con Css que cuando un elemento recibe un evento (:hover por ejmplo) sean sus hermanos precedentes o un ancestro (padre, abuelo...) el que sufra algún cambio.

En estos casos no hay una única forma de lograrlo empleando sólo Css. Como siempre todo es función de qué queremos lograr. El planteamiento y técnica no será la misma si el cambio es en los hermanos (siguientes y precedentes) que si es sobre su contenedor padre o si es sobre el <body>.

Antes de entrar en detalle con esta nueva forma de emular el selector de precedentes con la propiedad position déjeme recordar de forma breve otras formas ya vistas en el blog.

Emular selector Css de precedente con position

Redimensionado de hermanos

La más veterana y sencilla es el típico reparto de espacio entre hermanos y su modificación al :hover sobre cualquiera de ellos: que aumente el "enfocado" a costa de todos los demás.

Allá por Febrero de 2012 publiqué el post Selector Css de ancestro y precedentes "funcional" donde lo tienes explicado en detalle.

En resumen, todo se reduce a tres reglas Css. Si lo realizamos con una lista con cuatro li´s las declaraciones relativas al caso serían:


ul > li {
 width: 25%;
}
ul:hover > li {
 width: 15%;
}
ul:hover > li:hover {
 width: 55%;
}

Esto tan sencillo puede ser usado junto a otras propiedades para lograr un resultado final mucho más vistoso. Tal como en la siguiente demo del artículo Slider con bordes sesgados y transición animada

See the Pen Slider with oblique border by Kseso (@Kseso) on CodePen.

:target y :checked

Otras realizaciones más complejas pueden basarse en el uso de las pseudoclases :target y :checked. Son muchas las demos del blog basadas en ellas para lograr resultados finales muy dispares.

En el artículo Parent selector o de cómo remontar el DOM con puro Css recogía algunos ejemplos. Todos juntos los reuní en esta demo:

See the Pen Going up the DOM in pure Css by Kseso (@Kseso) on CodePen.

Selector de padre con Position: static

Seguro que recuerdas que el valor static es el valor por defecto de la propiedad position. Si no se declara otro valor exprofeso es el que aplica.

Entre otras características propias de este valor hay dos que serán las que usemos en nuestro beneficio para simular un selector de ancestro. Un elemento con position: static:

No es referente para posicionar a sus hijos.
No crea contexto de apilamiento en el eje Z. Esto es, no aplica la propiedad z-index en él ni sirve como base para el z-index de sus hijos.

El no ser referente para el posicionamiento de sus hijos tiene un doble efecto:
— Un hijo de una caja estática posicionado de forma absoluta lo hará con respecto a su ancestro más próximo que tenga otro valor que no sea static.
— Las propiedades de colocación top | right | bottom | left además de para ubicar al elemento si se usan uno o dos valores se pueden utilizar para dar tamaño al declarar tres o las cuatro.

Así que si tenemos un grupo de enlaces en una lista, con el padre (ul) con position: relativey los li´s como estáticos, los enlaces (a) y también sus pseudoelementos tendrán como referentes a la lista (ul) en caso de posicionarse de forma absoluta y al declararles las cuatro propiedades de colocación con lo harán respecto al tamaño de la lista, no de los li´s.

Todo esto trabajando junto y a la vez:

See the Pen JodWoW by Kseso (@Kseso) on CodePen.

Las declaraciones Css más relevantes de la demo son:


li {
  display: inline-block;
  width: 25%;
  position: static;
}
li::after {
  content: '';
  position: absolute;
  transition: .5s;
}

Si observas el Css anterior, verás que los li::after están posicionados pero no colocados. Para los distintos efectos de cada uno de ellos al :hover, lo hago de forma independiente:


li:nth-child(1)::after {
  left:0;top:0;right:100%;bottom:0;
  background: rgba(102,51,153,.65);
}
li:nth-child(1):hover::after {
  right:0;
}
li:nth-child(2)::after {
  left:0;top:0;right:0;bottom:100%;
  background: rgba(85,172,238,.65);
}
li:nth-child(2):hover::after {
  bottom:0;
}
li:nth-child(3)::after {
  left:0;top:100%;right:0;bottom:0;
  background: rgba(68,68,170,.65);
}
li:nth-child(3):hover::after {
  top:0;
}
li:nth-child(4)::after {
  left:100%;top:0;right:0;bottom:0;
  background: rgba(255,99,71,.65);
}
li:nth-child(4):hover::after {
  left:0;
}

Estas reglas son las responsables de que al evento sobre cada icono de la demo cambie el color de fondo de toda la caja que los contiene (aparentemente el background de la lista) así como las distints direcciones desde la que se despliega el fondo.

En ella no he necesitado utilizar lo relativo a la propiedad z-index. Cosa que sí utilizo en la siguiente demo. Ejemplo un poco más elaborado de uso de position: static junto al flexbox.

Aquí los enlaces están alojados diréctamente en el footer y son ellos los estáticos:


footer a {
  position: static;
}
footer a::after {
  content: '';
  position: absolute;
  z-index: -2;
  transition: .5s;
}
footer a:hover::after {
  z-index: -1;
}

See the Pen Flex-Profile by Kseso (@Kseso) on CodePen.

Artículo publicado originalmente el 30/11/2014

Kseso

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