css: стиль всех элементов перед зависанием

Question

Я пытаюсь стилизовать все элементы перед зависанием (с левой стороны).

Вот мой код: 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> 

Все, что я сделал это парит с правой стороны (после того, как парил элемент), но я хочу его слева.

Answer 1

Небольшое изменение с HTML и CSS может удовлетворить ваши требования.

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

Вы хотите стилизовать все элементы по-разному?

вы можете выбрать элементы с помощью селектора nth-child.

Пример:

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