css: styl wszystkie elementy przed hovered

Question

Próbuję style wszystkie elementy przed hovered (od lewej strony).

Oto mój kod: jsFiddle

[CSS]:

a, 
a:link, 
a:hover, 
a:visited { 
    /* ... */ 
    color: #222; 
} 

a:hover, 
a:hover ~ a { 
    color: #f00; 
} 

[HTML]:

<a href="#">text1|</a> 
<a href="#">text2|</a> 
<a href="#">text3|</a> 

Wszystko robiłem to unoszące się z prawej strony (po unosił element), ale chcę go od lewej.

Answer 1

Niewielka zmiana z HTML i CSS może spełnić swoje wymagania.

HTML:

<div><a href="#">this/</a><a href="#">line/</a><a href="#">is/</a><a href="#">hovering/</a><a href="#">from/</a><a href="#">left/</a><div> 

CSS:

a, 
a:link, 
a:hover, 
a:visited, 
div { 
    text-decoration: none; 
    font-size: 14pt; 
    background: #def; 
    color: #222; 
} 
div:hover a{ 
    color: #f00; 
} 
a:hover ~ a { 
    color: #222; 
} 

jsFiddle

Answer 2

Czy chcesz inaczej wszystkie elementy stylu?

można wybrać elementy za pomocą selektora n-dziecko.

Przykład:

a:nth-child(1){} 
a:first-child+a{} or a:nth-child(1) + a /* Second Element */ 
a:last-child{} /*select last child, Works in ie8+, webkit, moz, o */