Поиск элементов, имеющих определенные потомки

Question

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

nav[role=navigation] ul li a:after { 
padding-left:5px; 
content: "\25BE";
color:#00b49c;
}

Есть идеи, как мне это сделать?

Я пытался: nav[role=navigation] > ul li a:after но не повезло.

Спасибо, ребята

Answer 1

Исходя из предоставленной информации, я предполагаю, что ul - это подпункт, верно?Если это так, лучшее решение, которое я могу придумать (не проверено):

$(document).ready(function() {
    $("nav[role=navigation]:has(ul)").each(function() {
        $("ul li a", $(this)).after("\25BE").css({color: "#00b49c", paddingLeft: "5px"});
    });
});

Несколько замечаний, если вы новичок в jQuery:

1. Этостандартно использовать метод $(document).ready(function() {});.
2. Селектор :has специфичен для jQuery (насколько я знаю, хотя он может быть включен в CSS3 или 4 - всякий раз, когда это выходит).
3. Обратите внимание, что свойства CSS в функции .css разделены запятыми, имена свойств пропускают тире, где используется, и первую букву после тире пишется с большой буквы (например, paddingLeft).
4. The$(this) после того, как ul li a используется, чтобы сказать любые ссылки в элементах списка в неупорядоченных списках, которые находятся в текущем объекте в цикле .each.

Я не совсем уверен, что это такоеВы хотите выбрать - будь то nav, ul или li.Что бы это ни было, вы должны изменить приведенный выше код так, чтобы элемент, который вы хотите выбрать, был перед: в первой строке.

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

Answer 2

Попробуйте

nav[role=navigation] ul li a::after { 
content: "\25BE";
color:#00b49c;
display: block;
float: left;
width: 20px;
height: 10px;
}