Добавление стрелки для связи с детьми

Question

Вот код самого простого многоуровневого меню:

<nav>
    <ul>
        <li><a href="#">I am a 1st level link</a></li>
        <li><a href="#">I am a 1st level link with children and I want to have an arrow next to me (or different background)</a>
            <ul>
                <li><a href="#">I am a 2nd level link</a></li>
                <li><a href="#">I am a 2nd level link with children and I want to have an arrow next to me (or different background)</a>
                <ul>
                    <li><a href="#">I am a 3nd level link</a></li>
                    <li><a href="#">I am a 3nd level link</a></li>
                </ul>
                </li>
            <li><a href="#">I am a 2nd level link</a></li>
            </ul>
        </li>
        <li><a href="#">I am a 1st level link</a></li>
        <li><a href="#">I am a 1st level link</a></li>
    </ul>
</nav>

Есть ли способ выбора ссылок с дочерними элементами и добавления их в разные стили (фон, значки в стиле списка и т. Д.)? Меню динамическое, поэтому в этом случае указание идентификаторов или классов не поможет.

Я бы хотел увидеть это в CSS3, если это невозможно - jQuery или PHP будут в порядке. Я хочу, чтобы он был готов кросс-браузерным. Но на данный момент даже не знаю, с чего начать?

Большое спасибо!

Answer 1

Кажется, что это работает с использованием jquery ... вы можете настроить специальный класс, чтобы он был фоновым изображением с ошибкой или чем угодно ...

<script>
    $(document).ready(function(){
        $('ul a + ul').each(function(){
            $(this).prev().addClass('special');
        });
    });
</script>
<style type="text/css">
    .special {background-color: red;}
</style>

Answer 2

Я использовал приведенный выше код и создал пример с использованием jsFiddle.

Посмотреть пример здесь

Answer 3

Это может помочь вам:

$('li>a')
.filter(function(){
    return $(this).next().is('ul') ? true : false;
}).addClass('haveChild');

Answer 4

Псевдоселектор :only-child выбирает элементы, которые являются единственным потомком своего родителя. Вы можете использовать это в CSS3 для стилизации элементов без стрелок , переопределяя эти стрелками . Вы можете использовать, например, псевдоселектор :first-of-type для основного селектора в попытке запретить браузерам, которые не поддерживают :only-child, отображать стрелки на всех элементах.

Например:

nav ul a:first-of-type {
    /* :first-of-type for CSS3-incompat browsers; can be safely removed */

    /* Apply arrow code */
    background: ...;
}

nav ul a:only-child {
    /* Undo arrow code above */
    background: transparent;
}