css3: not() для проверки родительского класса

У меня есть неупорядоченный список, с помощью плагина bootstraps "tabs". Код выглядит так:

<ul>
  <li class="active span3"><a href="#ourAgency" data-toggle="tab"><i class="icon-building icon-3x"></i>Our Agency</a></li>
  <li class="span3"><a href="#studentVisas" data-toggle="tab"><i class="icon-laptop icon-3x"></i>Student Visas</a></li>
  <li class="span3"><a href="#workVisas" data-toggle="tab"><i class="icon-suitcase icon-3x"></i>Work Visas</a></li>
  <li class="span3"><a href="#accreditation" data-toggle="tab"><i class="icon-legal icon-3x"></i>Accreditation</a></li>
</ul>

Я хотел бы использовать CSS3 для изменения цвета всех ссылок <a>, у родительского <li> НЕ имеет класс .active.

Я пробовал что-то вроде этого:

 a:not(li.active>a){
    color:grey;
}

но безрезультатно. Есть ли способ сделать это, или я лаяю неправильное дерево?

Ответ 1

Комбинаторы, такие как >, + и пространство для потомков, недопустимы внутри :not() в CSS; они разрешены только как селектор jQuery. Вы можете узнать больше в этом другом вопросе.

Тем не менее, вы можете использовать :not() только для li и вывести часть > a; однако это будет зависеть от структуры ваших элементов ul и li:

li:not(.active) > a {
    color: grey;
}

Например, вы всегда можете .span3 другие селекторы, такие как .span3 если вы хотите ограничить его a элементами с родителями li этого класса:

li.span3:not(.active) > a {
    color: grey;
}

Однако имейте в виду, что вы можете полагаться только на использование :not() таким образом, если у вас есть контроль над разметкой, или структура по крайней мере предсказуема (например, вы знаете, какие элементы являются родителями). Например, в вашем случае вы смотрите только на li.span3 > a и применяете стили только тогда, когда li.span3 не имеет активного класса. С помощью этой информации вы можете создать селектор, подобный одному из вышеперечисленных, который должен работать должным образом.