Selector de precedentes con css

Buenas a todos! En el artículo de hoy, vamos a ver que con un sencillo código de css, vamos a poder cambiar un elemento, cuando seleccionamos otro.. no se entiende un pimiento, no? Si continuais leyendo lo entendereis! (o eso espero.. :P)

Imaginar que teneis una lista de elementos tal que así:

<div class="slider">
  <div><p></p></div>
  <div><p></p></div>
  <div><p></p></div>
  <div><p></p></div>
</div>

Tenemos divs anidados que queremos convertir en un slider de colores en el que si seleccionamos uno de los elementos, éste aumente de tamaño y el resto disminuya.

Mediante css vamos a dar forma a este slider:

.slider {

 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 margin: 50px auto;
 overflow: hidden;
 width: 90%;
 height: 100px;
}
.slider div {
  width: 25%;
  height:100%;
  float:left;
  height: 100%;
  width: 25%;
  -moz-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.slider div p {margin: 10px;}

.slider div:nth-child(4n+0) {background: red;}
.slider div:nth-child(4n+1) {background: green;}
.slider div:nth-child(4n+2) {background: blue;}
.slider div:nth-child(4n+3) {background: yellow;}

En la primera declaración (.slider) le damos tamaño al contenedor y le decimos que todo lo que solbresalga no lo muestre (overflow:hidden). En la segunda (.slider div) le damos estilos a los divs contenidos en el div con clase .slider, diciendo que se repartan cada uno el 25% del ancho, todo el alto y le decimos que la transición (para cuando tengamos el movimiento, se haga poco (son las 4 últimas lineas, se hace así, para que funcione para los distintos navegadores). En las últimas 4 lineas del css declaramos los colores de cada uno de los divs. También se puede dar nombre a cada uno y seleccionarlo, pero así vemos un modo más original de hacerlo 😛

Podríamos utilizar JQuery para que al seleccionar el segundo elemento, los demás se disminuyan su tamaño, pero pudiendo usar css.. parece mucho más sencillo. Para ello utilizaremos el siguiente código css:

.slider:hover div {
 width: 15%;
  
}

En el, estamos diciendo que si se selecciona cualquier elemento, reduzcan su tamaño al 15%, en lugar del 25% que ocupaban antes. Ahora solo queda que el que estamos seleccionando ocupe el resto del espacio:

.slider:hover div:hover {
  width: 55%;
 
}

Esto da como resultado el siguiente slider:

Bueno, espero que os haya gustado. Cualquier duda usar los comentarios. Un saludo!

Deja un comentario