Добавить стиль только к элементу верхнего уровня

У меня есть раскрывающееся меню (список), состоящее из ul и li элементов.Добавить стиль только к элементу верхнего уровня

У каждого элемента li есть вложенный элемент a.

Элементы без детей имеют класс leaf.

Элементам в конце каждого списка присваивается класс last.

(я не пишу, ни дизайн этого меню. Это проект, который я был назначен на работе и меню строится Drupal 7)

Единственный метод, который я есть модификации этих пунктов меню с помощью CSS ,

Я хотел бы изменить последние два пункта меню на верхнем уровне .

Оба эти предмета имеют класс leaf, а последний также имеет класс last.

Вот что я сделал:

.desktop.navigation .leaf { 
     padding-left:10px; 
     padding-right: 10px; 
     margin-right: 5px !important; 
     background-color: rgb(55, 166, 97); 
} 

.desktop.navigation .leaf > a{ 
     color: white; 
     font-weight: bold; 
} 

.desktop.navigation .last { 
     padding-left:10px; 
     padding-right: 10px; 
     margin-left: 5px !important; 
     background-color: rgb(55, 97, 166); 
} 

.desktop.navigation .last > a{ 
     color: white; 
     font-weight: bold; 
}

Этот CSS делает то, что я хочу, чтобы узлы верхнего уровня, но это также влияет на узлы на более низких уровнях.

Есть ли способ, которым я могу применять эти стили только к узлам верхнего уровня моего меню?

Единственный способ, которым я могу думать, чтобы изолировать эти li элементов является то, что их ul родитель не имеет ul родителя. Остальные li элементы, на которые я не хочу быть затронутыми, имеют родительский элемент ul, но этот родительский элемент ul имеет родительский элемент ul.

И по просьбе @emmanuel; изображение моего HTML (с Drupal написала все HTML и я не могу изменить его, в противном случае я бы не иметь эту проблему):

List

источник

2014-10-29 WebWanderer

Пожалуйста, создайте фрагмент кода, включая html-код. – emmanuel

Ну, я могу украсть его с консоли Javascript, я думаю. Хорошо, держись ... – WebWanderer

Вы должны попробовать добавлять CSS для элементов меню уровня ниже, хорошо, что очистит изменения, внесенные вами на верхний уровень. Например:

.desktop.navigation .leaf li { 
    /* css for lower level li */ 
} 
.desktop.navigation .leaf li a { 
    /* css for lower level a 
}

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

ul.menu li a { 
    color: white; 
    font-weight: bold; 
} 
ul.menu li ul li a { 
    color: blue; 
    font-weight: normal; 
}

источник

2014-10-29 21:00:50 cakan

Я вижу, что вы говорите, но я должен был бы сделать конкретную инструкцию CSS для каждого элемента более низкого уровня, и этот список динамически изменяется ... – WebWanderer

Я не знаю, как выглядит HTML, но если вам нужен один стиль для верхнего уровня и другой стиль для всех других пунктов меню, тогда это должно сделать трюк, поскольку дополнительный css повлияет на все ниже. .leaf li. – cakan

Это может помочь.

*:not(li) > ul > li > a {} /* for top level list items */ 
*:not(li) > ul > li.leaf >a {} /* for top level Leaf items */

Второй путь, или для лучшего понимания, первый взгляд для родительского узла верхнего уровня ul, такие как div.navigation, а затем использовать

div.navigation > ul > li > a {} 
div.navigation > ul > li.leaf > a {}

Смотрите эту скрипку http://jsfiddle.net/MenuSo/jp5L4ehk/3/

источник

2014-10-30 05:07:31

Все из вас выложили очень хорошие ответы, и по вашим ответам я многому научился о CSS, но, похоже, я решил свой собственный вопрос.

Unfortunatley, я не смог настроить точные элементы, которые я хотел, с одним утверждением. Я должен был нацеливать каждого последнего ребенка из каждого меню, а затем следовать этому утверждению с помощью инструкции отмены для детей младшего уровня.

ul.menu > li.leaf { 
     padding-left:10px; 
     padding-right: 10px; 
     margin-right: 5px !important; 
     background-color: rgb(55, 166, 97); 
} 

/* 
Cancel 
*/ 
ul.menu > li.expanded > ul.menu > li.leaf { 
     padding-left: 10px !important; 
     padding-right: 10px !important; 
     margin-right: 0px !important; 
} 

ul.menu > li.last { 
     padding-left:10px; 
     padding-right: 10px; 
     margin-left: 5px !important; 
     background-color: rgb(55, 97, 166); 
} 

/* 
Cancel 
*/ 
ul.menu > li.expanded > ul.menu > li.last { 
     padding-left: 10px !important; 
     padding-right: 10px !important; 
     margin-left: 0px !important; 
}

источник

2014-10-30 14:58:47 WebWanderer

Добавить стиль только к элементу верхнего уровня

ответ

Смежные вопросы