Kseso? jugando con css: selector de precedentes

Un selector css de hermanos, tantos los precedentes como los antecedentes en el DOM.

by kseso

HTML

<!-- Emulalación con css de un selector de hermanos precedentes en el DOM  -->
  <div id="slider">
      <div class="elemento"><p>Uno</p></div>
      <div class="elemento"><p>Dos</p></div>
      <div class="elemento"><p>Tres</p></div>
      <div class="elemento"><p>Cuatro</p></div>
  </div>

CSS

* {
  margin:0; padding:0; border:none; position: relative;
}
body, html {height: 100%;}
#slider {
    background: red;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    margin: 50px auto;
    overflow: hidden;
    width: 90%;
    height: 20%;
}
#slider div {
    width: 25%;
    height:100%;
    float:left;
    float: left;
    height: 100%;
    width: 25%;
    font-family: sans-serif;
    font-size: 2em;
    color: #444;
    text-shadow: 1px 1px 0 #f0f0f0;
    font-family: sans-serif;
    -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:hover div {
  width: 15%;
  font-size: 1em;
}
#slider:hover div:hover {
    width: 55%;
    color: #f0f0f0;
    font-size: 4em;
    text-shadow: 1px 1px 0 #444;
}
#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;}