Выбор соседнего ребенка ... как?

Question

пытается выбрать соседний дочерний элемент с помощью CSS ... не совсем уверен, как Это структура HTML

<ul>
    <li>
        <a href="#">
            <span class="icon"></span>
            First level
        </a>
        <ul>
            <li>
                <a href="#">Second level</a>
            </li>
        </ul>
    </li>
</ul>

Я хочу сказать, что есть меню с несколькими уровнями. Когда существует UL, существующий в LI, необходимо иметь значок раскрывающегося списка / раскрытия ... поэтому я подумал, что если я использую соседний селектор, я могу определить, есть ли у этого уровня дети для расширения, и это то, что я думал, будет работать, но не «т:

ul li a ~ ul .icon {
    // doesnt work
}
ul li a .icon ~ ul {
    // doesnt work
}

Это работает, но мне нужно нацелиться на .icon

ul li a ~ ul {
    // works
} 

Приветствия, Дом

Answer 1

Опираясь на мой комментарий к вашему вопросу.Если у вас есть контроль над тем, как генерируется HTML для меню, можно обойти это путем добавления дополнительного класса к каждому элементу li, имеющему подменю.Вот так:

<ul>
    <li class="has-submenu">
        <a href="#">
            <span class="icon"></span>
            First level
        </a>
        <ul>
            <li>
                <a href="#">Second level</a>
            </li>
        </ul>
    </li>
</ul>

Тогда вы можете использовать селектор вот так:

.has-submenu .icon {
    /* Do your stuff here */
}

Answer 2

ul - это дитя ли, а не якорь. Так что ul li ul.
Если вы хотите выбрать его как родного брата, то ul li a + ul