Check if ul has

Question

We have sub navigation with several UL elements with li with UL elements in it.

Consider the following:

<ul>
    <li> <a href="#">link level 1</a>

        <ul>
            <li> <a href="#">link level 2</a>

            </li>
            <li> <a href="#">link level 2</a>

                <ul>
                    <li> <a href="#">link level 3</a>

                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

We need an arrow behind all anchor tags, with the exception of level 3.

Now I have the following CSS, but only the arrow icon after level 2 is displayed on it.

ul {
    padding:20px 0 0 0;
    ul {
        padding: 0;
        margin-left: 13px;
        & > li {
            list-style-type: none;
            & > a:not(:last-child):after {
                margin-top:3px;
                content:"\E259";
                font-family:'Glyphicons Halflings';
                text-align:right;
                font-size: 10px;
                float:right;
            }
        }
    }
}

This draws an icon where a is not the last element. But we also need to have an arrow beyond level 1, which according to this CSS is the last element, so the arrow icon is not drawn.

How can we solve this?

Answer 1

You need to update your LESS (note that I updated the font and content, so I did not have to import the glyph font):

ul {
    padding:20px 0 0 0;
    & > li {
            list-style-type: none;
            & > a:not(:last-child):after {
                margin-top:3px;
                content:">";
                font-family:'arial';
                text-align:right;
                font-size: 10px;
                float:right;
            }
        }
    ul {
        padding: 0;
        margin-left: 13px;
    }
}

, " > " . . : https://jsfiddle.net/6duxLkc4/