уникальный класс для списка

[JastinB]

Имеется список с классами к каждому елементу, не могу присвоить к каждому классу уникальное значение стиля. Если присваиваю елементу Folder 3.1.1 класс то все елементы которые идут после него в подсписке приобретают этот класс. Как сделать их уникальными. Т.е. например .main с красным бекграундом .sub с синим, если к классу .sub добавляется подкласс plus то бекграунд ТОЛЬКО ЭТОГО елемента становится белым а все остальные елементы которые находятся в подсписке имели синий цвет.

<li class="main"><a href="#">Main item</a>
  <ul>
  <li class="sub"><a href="#">Folder 2.0</a></li>
  <li class="sub plus"><a href="#">Folder 2.1</a>
    <ul>
    <li class="sub"><a href="#">Sub Item 2.1.1</a></li>
    <li class="sub"><a href="#">Sub Item 2.1.2</a></li>
    <li class="sub plus"><a href="#">Folder 3.1.1</a>
		<ul>
    		<li class="sub"><a href="#">Sub Item 3.1.1.1</a></li>
    		<li class="sub"><a href="#">Sub Item 3.1.1.2</a></li>
    		<li class="sub"><a href="#">Sub Item 3.1.1.3</a></li>
    		<li class="sub"><a href="#">Sub Item 3.1.1.4</a></li>
    		<li class="sub"><a href="#">Sub Item 3.1.1.5</a></li>
		</ul>
    </li>
    <li class="sub"><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>

Edited February 7, 2012 by JastinB

[buddah]

.

Edited February 7, 2012 by buddah

[sigma77]

JastinB,

Вариантов несколько, в зависимости от того, что именно вам нужно

.plus > a {
  background: white;
}

.plus {
  background: white;
}
.plus ul {
  background: blue;
}

Если нужно, чтобы белый фон задавался элементам, имеющим и класс sub и класс plus - использовать селектор .sub.plus (IE7+)

[ablay2009]

Задавать стили можно не только элементам с классами, вы можете написать также, как в сообщении выше

[JastinB]

.plus > a {
  background: white;
}

То что нужно спасибо!

Если нужно, чтобы белый фон задавался элементам, имеющим и класс sub и класс plus - использовать селектор .sub.plus (IE7+)

а чем отличается запись .sub.plus{} от .sub .plus{} ? Может ещё подскажите где можно прочитать про описание этого...мм не наю как назвать, вобщем знака ">" в .plus > a? что он значит? Спасибо.

Задавать стили можно не только элементам с классами, вы можете написать также, как в сообщении выше

Я это знаю просто так решил сделать...

[sigma77]

а чем отличается запись .sub.plus{} от .sub .plus{} ?

.sub.plus {} - выберет все элементы, которые имеют эти 2 класса одновременно.

.sub .plus {} - выберет все элементы с классом .plus, которые являются потомками элемента с классом .sub

Может ещё подскажите где можно прочитать про описание этого...мм не наю как назвать, вобщем знака ">" в .plus > a? что он значит? Спасибо.

Знак > означает отношения родитель > дочерний элемент. Т.е. в случае .plus > a - элемент a, является дочерним элементом (т.е. непосредственно вложен) по отношению к элементу с классом .plus, и стиль не будет распространятся на потомков, которые вложены в другие элементы.

http://htmlbook.ru/samcss/dochernie-selektory