title: Is there a CSS way to add an arrow if a ul has a ul child?
body: <p>My navigation structure looks like this:</p>
  
  <pre><code>&lt;div class="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page with Subpages&lt;/a&gt;
              &lt;ul class="children"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Page with another subpage&lt;/a&gt;
                      &lt;ul class="children"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;subsubpage&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page 4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want all <code>&lt;li&gt;</code>'s that have a subnavigation children to have a little down-arrow applied so users know this page has subpages.</p>
  
  <p>Is it possible to detect in pure css if a <code>&lt;li&gt;</code> has children of <code>ul.children</code>? In my example above, the "Page with Subpages" should have the down arrow applied and the "Page with another subpage" as well.</p>
  
  <p>Right now I'm using jquery to solve this problem:</p>
  
  <pre><code>$(function() {
      $('.menu a').each(function() {
          if ( $(this).parent('li').children('ul').size() &gt; 0 ) {
              $(this).append('&lt;span class="dwn"&gt;▼&lt;/span&gt;');
          }           
      });
  });
  </code></pre>
  
  <p>Is there an easy pure CSS way to do so?</p>
  
  <p>Thank you.</p>