Alternative to only-child on Internet Explorer 8

Question

I created a CSS menu that looks like this - jsfiddle .

The CSS classes used.

 #main_nav { margin-top:15px } #main_nav ul { list-style:none; position:relative; float:left; margin:0; padding:0; background: #888; } #main_nav ul a { display:block; text-decoration:none; font-size:12px; line-height:32px; padding:0 15px; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; } #main_nav ul li { position:relative; float:left; margin:0; padding:0 } #main_nav ul li.current-menu-item { background:#ddd } #main_nav ul li:hover { background: #008000 } #main_nav ul ul { display:none; position:absolute; top:100%; left:0; background:#888; padding:0 } #main_nav ul ul li { float:none; width:200px; } #main_nav ul ul a { line-height:120%; padding:10px 15px } #main_nav ul ul ul { top:0; left:100% } #main_nav ul li:hover > ul { display:block } .menu li > a:after { margin-left: 5px; float: right; content: '\\25BA'; } .menu > li > a:after { margin-left: 5px; float: right; content: '\\25BC'; } .menu li > a:only-child:after { margin-left: 0; content: ''; } 

 <div id="main_nav"> <ul class="menu"> <li class="current-menu-item"><a href="#">Home</a></li> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a> <ul> <li><a href="#">Deep Menu 1</a> <ul> <li><a href="#">Sub Deep 1</a></li> <li><a href="#">Sub Deep 2</a></li> <li><a href="#">Sub Deep 3</a></li> <li><a href="#">Sub Deep 4</a></li> </ul> </li> <li><a href="#">Deep Menu 2</a></li> </ul> </li> <li><a href="#">Sub Menu 5</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li class="dir"><a href="#">Sub Menu 1</a></li> <li class="dir"><a href="#">Sub Menu 2</a> <ul> <li><a href="#">Category 1</a></li> <li><a href="#">Category 2</a></li> <li><a href="#">Category 3</a></li> <li><a href="#">Category 4</a></li> <li><a href="#">Category 5</a></li> </ul> </li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a></li> <li><a href="#">Sub Menu 5</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#">Menu 6</a></li> </ul> </div> 

a:only-child:after in the given CSS does not work on Internet Explorer (8). Hence, an arrow appears on every menu item including those items without a sub menu.

Is there an alternative to a:only-child:after in Internet Explorer 8?

Answer 1

I couldn't find any other pseudo selector that could act in this case in place of :only-child . I tried to work with some sibilings selectors but unsuccessfully.

A possible solution would be to "mock" the only-child with Jquery. Jquery natively supports most of css pseudos, browser independent. You could something like this:

$(document).ready(function() {
    $("a:only-child").addClass("only-child");
});

Setting a class .only-child to every a that would meet the pseudo. Then, change your css rule to:

.menu li > a.only-child:after {

Working fiddle: http://jsfiddle.net/xgjhk0kw/2/