Add css stylings to list item of only it has child

Question

I have a list like below

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

And I need to add an arrow using :after only if li has a ul tag inside with using only css. I have applied following css styling but problem is not solved.

ul li ul:parent:after {
   border: 5px solid transparent;
   border-left: 8px solid #522;
   width: 0;
   height: 0;
   content: "";
   display: inline-block;
   transform: rotate(90deg);
   margin-right: 5px;
}

Are there any methods for achieve this? I appreciate your help!

Answer 1

:parent selectors don't yet exist in CSS. You can do what you are asking with the :has() selector in jQuery.

However, I don't think :after selector is quite what you are looking for either, as it would not come after the li text, but after the entire element,

<ul>
 <li>
  <a>Outer Item</a>
   <ul>
    <li>
     <a>Inner Item</a>
    </li>
   </ul>
 </li> <-- :after would place arrow here
</ul>

Similar to this:

o Outer Item
    o Inner Item
<--

You could use Javascript or jQuery to add the arrow after the initial text, but I don't think there is a way to do that with just CSS.

You can get sort of close with this, but the arrow appears on a line between the parent item and the child list:

li > a:first-child + ul:before {
   border: 5px solid transparent;
   border-left: 8px solid #522;
   width: 0;
   height: 0;
   content: "";
   display: inline-block;
   transform: rotate(90deg);
   margin-right: 5px;
}

see http://jsfiddle.net/29kc1p1x/