title: Selectors in an ordered list animated with CSS3 transitions
body: <p>I put together the following ordered list that makes use of transitions. Basically at the bottom of the first three li-elements there is being animated a border-bottom from a slight to a dark grey. Now what I want is to modify this color and make it appear in three different colors. I tried this with spans and li classes already, but had no success. Can anyone of you clarify how I could possibly trigger this behavior according to the given code?</p>
  
  <pre><code> &lt;div id="list"&gt;
    &lt;ul&gt;
      &lt;li class="1"&gt;&lt;a href="#sectionportfolio"&gt;No hacemos uso de cualquier de los componentes prefabricados o mezclas preparadas.&lt;/a&gt;&lt;/li&gt;
      &lt;li class="2"&gt;&lt;a href="#sectionportfolio"&gt;Una alta calidad en la compra de los ingredientes y la preparación es nuestra principal prioridad.&lt;/a&gt;&lt;/li&gt;
      &lt;li class="3"&gt;&lt;a href="#sectionportfolio"&gt;Todos nuestros productos se hacen con amor y se han inspirado en recetas familiares.&lt;/a&gt;&lt;/li&gt;
      &lt;li class="4"&gt;&lt;a href="#sectionportfolio"&gt;Queremos que nuestros clientes estén satisfechos. Si alguna vez tiene motivo de queja, le pedimos que nos devuelva su compra tan pronto como sea posible en nuestra tienda.&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  #list {
    width: 100%;
    text-align:center;
  }
  
  #list ul {
    list-style-type: none;
    margin: 0;
    padding-bottom: 0;
  }
  
  #list ul li {
    font: 200 14px/1.5 'oswaldlight';
    border-bottom: 1px solid #ccc;
    padding:30px 0;
    -webkit-transition: border-bottom 1.0s ease, border-bottom 1.4s ease, padding-top 1.0s ease, padding-bottom 1.0s ease, font-size 0.7s ease, background-color 0.3s ease, color 1.0s ease;
    -moz-transition: border-bottom  1.0s ease, border-bottom 1.4s ease, padding-top 1.0s ease, padding-bottom 1.0s ease, font-size 0.7s ease, background-color 0.3s ease, color 1.0s ease;
    -o-transition: border-bottom 1.0s ease, border-bottom 1.4s ease, padding-top 1.0s ease, padding-bottom 1.0s ease, font-size 0.7s ease, background-color 0.3s ease, color 1.0s ease;
    -ms-transition: border-bottom 1.0s ease, border-bottom 1.4s ease, padding-top 1.0s ease, padding-bottom 1.0s ease, font-size 0.7s ease, background-color 0.3s ease, color 1.0s ease;
    transition: border-bottom 1.0s ease, border-bottom 1.4s ease, padding-top 1.0s ease, padding-bottom 1.0s ease, font-size 0.7s ease, background-color 0.3s ease, color 1.0s ease;
    border-spacing:0;
    cursor:crosshair;
  
  }
  
  #list ul li:hover {
  
    border-bottom: 4px solid #858585;
    padding:40px 0px 5px 0x;
    border-spacing:0;
    font-size: 30px;
    color: #454545;
    cursor:pointer;
  }
  
  
  #list ul li:last-child {
    border: none;
  }
  
  #list li a {
    text-decoration: none;
    color: #888;
    text-align:center;
  }
  
  
  #list li a:hover {
      cursor:pointer;}
  </code></pre>