Different color for the active item in the menu bar

Question

I'm trying to change the color of the first item in this menu (that way the user knows is the active item), any help?

<ul>
  <li><a href="#" class="current">jkfasdf</a></li>
  <li><a href="#">jkffasdf fjaskdfasfs jajklfd fjklasdfas</a></li>
</ul>

ul{
  background: red;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  float: left; #esto permite que se adapte el ancho del ul al contenido..
  # quizas por ello no se pueda centrar si se quiere :)
}

li {
  padding: 10px; display: inline-block;
  border-left: 1px solid white;
  width: 100px;
  text-align: center;
  vertical-align: middle;
}
li:first-child {border-left: none;}

li.current {
   background: yellow;
}

a {

}

Here is the jsfiddle:

http://jsfiddle.net/y3NCq/46/

Answer 1

You're missing a space: li .current { . Without the space it is trying to apply it to an li item with a class of current , where you want it applied to a child of li with the class of current .

Answer 2

You can try the following

li a.current {
    background: yellow;
}