css: stile tutti gli elementi prima del passaggio del mouse

Question

Sto cercando di applicare lo stile a tutti gli elementi prima del passaggio del mouse (dal lato sinistro).

Ecco il mio codice: 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> 

Tutto quello che ho fatto è in bilico dal lato destro (dopo aleggiava elemento), ma lo voglio da sinistra.

Answer 1

Un piccolo cambiamento con l'HTML e CSS in grado di soddisfare le vostre esigenze.

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

Vuoi stilizzare tutti gli elementi in modo diverso?

è possibile selezionare gli elementi per il selettore nth-child.

Esempio:

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 */