Target the li that contains a ul

Question

I have my nav in a loop for a CMS. I want to add a chevron arrow to the li that opens a submenu, but im having trouble targeting it, because the ul is added with an if statement eg <% if Children %>.

So I want to add the chevron via css

a:before {
   font-family: FontAwesome;
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
}

What would that css style be? its for the third sub menu so I was thinking something along the lines of

nav ul ul > li > ul

^ Im aware that makes no sense.

So in that image notice how all the ul ul li elements have a chevron. thats my issue. I only want the li that contains a submenu to get a cheveron.

Sorry the explanations a bit messy - all ideas welcome, prefferably css, but i can work in javascript if its the only way to go!

this is my navigation code if it helps

<div class="navigation-container">

            <ul>     
                <% control Menu(1) %>                   
                    <li class="$LinkingMode"><a href="$Link" title="$Title" <% if RedirectionType = External || RedirectionType = RDFileTitle %>target="_blank"<% end_if %>>$MenuTitle </a>                   
                      <% if Children %> 

                          <ul> 
                              <% control Children %> 
                                  <li class="$LinkingMode"><a href="$Link" title="$Title" <% if RedirectionType = External || RedirectionType = RDFileTitle %>target="_blank"<% end_if %>>$MenuTitle </a> 
                                     <% if Children %>

                                         <ul> 
                                             <% control Children %> 
                                                <li class="$LinkingMode"><a href="$Link" title="$Title" <% if RedirectionType = External || RedirectionType = RDFileTitle %>target="_blank"<% end_if %>>$MenuTitle</a>
                                                    <% if Children %>

                                                        <ul>
                                                            <% control Children %>
                                                                <li class="$LinkingMode"><a href="$Link" title="$Title" <% if RedirectionType = External || RedirectionType = RDFileTitle %>target="_blank"<% end_if %>>$MenuTitle</a>
                                                                    <% if Children %>

                                                                        <ul>
                                                                            <% control Children %>
                                                                                <li class="$LinkingMode"><a href="$Link" title="$Title" <% if RedirectionType = External || RedirectionType = RDFileTitle %>target="_blank"<% end_if %>>$MenuTitle</a>
                                                                            <% end_control %>  
                                                                        </ul>

                                                                    <% end_if %>
                                                                    </li>   
                                                            <% end_control %>  
                                                        </ul>

                                                    <% end_if %> 
                                                    </li>
                                             <% end_control %> 
                                         </ul> 

                                     <% end_if %> 
                                  </li> 
                              <% end_control %> 
                          </ul>

                      <% end_if %>                 
                   </li>
                <% end_control %> 
            </ul>
            <div style="clear:both"></div>

<div style="clear:both"></div>      
</div>

Answer 1

I'm afraid CSS won't be taking home a win on this one... It's impossible for CSS to traverse backwards (that is, a child element cannot affect it's parent).

It is however, possible for the server side to handle this... For each one of your li elements, add another <% if Children %> statement. Like so:

<li class="$LinkingMode" <% if Children %> class="has-child" <% end_if %>  >

Then your above mentioned css rule could be modified to target: li.has-child > a:before {...}