How could I use pseudo-element :after :before conditionally

Question

If I wanted to only insert a pseudo-element after a link only if the link is followed by another element say ul. How could I do this?

Example:

<ul>
    <li>
        <a href="#">blah<!-- insert -> here with CSS --></a>
        <ul>
            <li>More stuff</li>
        </ul>
    </li>
    <li>
        <a href="#">blah 2<!--Do nothing here--></a>
    </li>
</ul>

CSS I wish could happen:

ul li a:after if(next:ul) {
   content:"->";
}

I'm not trying to use JavaScript/jQuery. And I realize if conditions are not apart of css. Is there a way to do this?

Answer 1

In general it is not possible to select elements based on their next sibling.

In your specific case, you can use ul li a:not(:last-child)::after, because it happens that your anchors that are not followed by an <ul> element are also the last child element.

Answer 2

You can simply use:

ul + li a:after {  /* ...css code... */  }

Basically this means:

Match an a element contained in a li element that is immediately preceded by an ul element.

---

The + operator in CSS is called adjacent sibling combinator.