css - Span text not changing on hover -

i got learning css3 , html5 , right i'm trying span text transition color when mouse hovers on .link div following code. reason not working, have tried couple of things work no luck far.

can me fix issue or point me right direction?

thank you!

--

html

<div id="celebrity-list">     <header>         <h2>celebrities</h2>     </header>      <div id="a">         <span class="letter">a.</span>         <div class="links">          </div>     </div> </div> 

css

#celebrity-list > div span.letter{     position: relative;     font: 22px arial;     color: #3a3a3a;     -webkit-transition: color .3s ease-out;       -moz-transition: color .3s ease-out;       -o-transition: color .3s ease-out;       -ms-transition: color .3s ease-out;       transition: color .3s ease-out;  }  #celebrity-list > div .links:hover #celebrity-list > div span.letter{     color: #b43838; }  #celebrity-list > div .links{     position: relative;     width: 190px;     height: 342px;     background: #f2f2f2;     -webkit-transition: border .3s ease-out;       -moz-transition: border .3s ease-out;       -o-transition: border .3s ease-out;       -ms-transition: border .3s ease-out;       transition: border .3s ease-out;  } 

at first, css selectors incorrect. x > y selector selects direct children. both span.letter , div.links no direct children of #celebrity-list not selected these selectors. ">" may removed in situation. next that, id should unique.

this not working @ all:

#celebrity-list > div .links:hover #celebrity-list > div span.letter{     color: #b43838; } 

you trying select span.letter, child of div, direct child of #celebrity-list, child of .links:hover, child of div, direct child of #celebrity-list.

if want change span.links text color should put element after div#links , select follows:

div.links:hover + span.letter { /* css */ } 

another option put span.letter inside div.links (as direct child) , use following selector:

div.links:hover > span.letter { /* css */ } 

if want leave span.letter before div.links in html should use javascript accomplish result wanted.