Как сделать различные цвета для ul li.acive?

Question

[Иван Седельников]

Мне нужно присвоить кнопкам различные цвета при наведении, но так как сайт сверстан на Bootstrap, получилось много кода и мне стало это не по силам... Помогите пожалуйста!

<div id=social-area class=page>
<div class=container>
<div class=row>
<div class=span12>
<nav id=social>
<ul>
<li><a href="http://vk.com/share.php?url=http://microvk.ru/" title="Поделиться в ВК" target=_blank><span class=font-icon-social-bold></span></a></li>
<li><a href="http://twitter.com/home?status=MicroVK (Beta) — приложение на Windows для удобного пользования социальной сетью ВКонтакте - microvk.ru" title="Твитнуть" target=_blank><span class=font-icon-social-twitter></span></a></li>
<li><a href="https://www.facebook.com/sharer.php?u=http://microvk.ru/" title="Поделиться в Facebook" target=_blank><span class=font-icon-social-facebook></span></a></li>
<li><a href="https://plus.google.com/share?url=http://microvk.ru/" title="Поделиться в g+" target=_blank><span class=font-icon-social-google-plus></span></a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>

#social-area{text-align:center;}
#social-area #social ul{margin:0;padding:0;}
#social-area #social ul li{display:inline-block;margin-left:30px;list-style:none;cursor:pointer;}
#social-area #social ul li:first-child{margin-left:0;}
#social ul li a{display:block;width:70px;height:70px;background:#222222;-webkit-transition:all 400ms ease-out 0s;-moz-transition:all 400ms ease-out 0s;-o-transition:all 400ms ease-out 0s;transition:all 400ms ease-out 0s;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);}
#social ul li a span{display:inline-block;margin:0;color:#55606a;font-size:32px;line-height:70px;opacity:0.3;filter:alpha(opacity=30);-webkit-transition:all 400ms ease-out 0s;-moz-transition:all 400ms ease-out 0s;-o-transition:all 400ms ease-out 0s;transition:all 400ms ease-out 0s;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);}
#social ul li:hover a,
#social ul li.active a{background-color:#DE5E60;-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);}
#social ul li:hover a span,
#social ul li.active a span{color:#FFFFFF;opacity:1;filter:alpha(opacity=100);-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);}

Answer 1

[Александр Цымбал]

используй

#social ul li:nth-child(1) a {цвета} /* для ссылки внутри первого li */
#social ul li:nth-child(2) a {цвета} /* для ссылки внутри второго li */
#social ul li:nth-child(3) a {цвета} /* и т.д. */
#social ul li:nth-child(4) a {цвета}

Comments

[Иван Седельников]

Я тоже так пробовал, но нужно как-то применить и .active... Вот что получается test.microvk.ru

[Александр Цымбал]

"#social ul li:nth-child(1).active a" например? не поможет?

[Иван Седельников]

Александр Цымбал: пробовал, тогда всем кнопкам присваивается цвет для первой кнопки, остальные игнорируются.

[Александр Цымбал]

Иван Седельников: важен именно порядок! если ты будешь писать так ":nth-child(1).active", то всё будет работать. а если наоборот ".active:nth-child(1)" - тогда, естесственно, нет.

[Иван Седельников]

Александр Цымбал: в том и моя проблема, что я правильно писал.

[Александр Цымбал]

тогда добавь классы каждому li (можно даже с помощью простенького jquery-кода)
for (var i = 1; i < $("#social ul li").length; i++) {
$("#social ul li:nth-child("+i+")").addClass("item"+i);
}

после этого у тебя у каждого элемента добавится класс item1, item2, item3, item4...
далее легко выбрать этот селектор с помощью css

[Tashiro]

Александр Цымбал: а смысл? использовать для этого JS а тем-более JQ когда тоже самое по псведоклассам нативным можно сделать.

[Александр Цымбал]

Tashiro: почитай, что пишет автор. у него не получается сделать псевдоклассами. поэтому я предлагаю крайнюю меру.

Answer 2

[Tashiro]

не советую использовать nth-child(n) а если вы ссылки местами захотите поменять?
чтобы не городить классов используйте такие слекторы

#social a[href^="http://vk.com"] {}
#social a[href^="http://vk.com"]:hover {}

итд
погуглите селекторы атрибутов.

Comments

[Иван Седельников]

Спасибо)
Помогло! Уже со вчерашнего дня этой фигней занимался, уже бесы брали, а тут оказалась всё настолько просто)