Как к не текущему (не активному) табу прописать стиль?

Question

[user_tm]

Имеется спойлер. У текущего таба красный цвет потому что к нему добавляется класс active, а как тогда у остальных табов (не текущих) прописать свой стиль? Пробовал прописать в css файле для класса tab сини цвет, но тогда он перебивает красный цвет т.е. класс active потом не работает.

<div class="wrapper">
	<div class="tabs">
		<span class="tab">Вкладка 1</span>
		<span class="tab">Вкладка 2</span>
		<span class="tab">Вкладка 3</span>
	</div>
	<div class="tab_content">
		<div class="tab_item">Содержимое 1</div>
		<div class="tab_item">Содержимое 2</div>
		<div class="tab_item">Содержимое 3</div>
	</div>
</div>

$(".tab_item").not(":first").hide();
$(".wrapper .tab").click(function() {
	$(".wrapper .tab").removeClass("active").eq($(this).index()).addClass("active");
	$(".tab_item").hide().eq($(this).index()).fadeIn()
}).eq(0).addClass("active");

.wrapper .active { color: red; }

Comments

[Ankhena]

не знаю ни jquery.

JQ тут не при чем.
Дело в CSS.
В том, как вы задаете синий.
Либо выкладывайте и CSS, а еще лучше делайте рабочую песочницу на jsfiddle.net или аналогах.
Либо самостоятельно прочитайте про специфичность селекторов.

Если других элементов tab и .active нету, кроме этих, то достаточно

.tab { color: blue; }
.active { color: red; }

Если .active вы добавляете где-то еще, то

.tab { color: blue; }
.tab.active { color: red; }

Если есть и другие tab с другими стилями, то еще добавьте еще родительский селектор.

Answer 1

[Антон Литвиненко]

.wrapper .tab {
  color: blue;
}
.wrapper .active {
  color: red;
}

а еще лучше для активного усилить на всякий случай, тогда не нужно располагать каскадом

.wrapper .tab {
  color: blue;
}
.wrapper .tab.active {
  color: red;
}

Comments

[user_tm]

Спасибо большое!

Answer 2

[Злой Снеговик]

А зачем прописывать один стиль на все вкладки? Нужно не:
.wrapper .active { color: red; }
Тем самым у вас все в один цвет окрашиваются.
Попробуйте так:
.tab .active { color: red; }

Comments

[Антон Литвиненко]

немножко не так, если уж на то пошло.
у него идет от враппера, чтобы например повысить специфичность и не влиять на другие табы вне враппера.
ваш пример должен выглядеть без пробела .tab.active, потому что активный класс добавляется таки к табу

[Злой Снеговик]

Антон Литвиненко, ок понял, ошибся.
Тогда ему нужно назвать контейнер табов несколько иначе, чем другие врапперы. А также задать для начала описание неактивного таба, а потом уже активного.

[Антон Литвиненко]

Евгений Широков, его код это всего-лишь пример. у меня в гистах есть ровно такой же

[user_tm]

Антон Литвиненко, так и есть