3

I have a menu with the :only-child selector so that I can indicate submenus. The :after selector works in IE8 (the only old IE version I have to support), but the :only-child selector does not, so I get an arrow on every menu item, not just on the ones with a submenu. 

.menu li > a:after { content: ' ▾'; }
.menu li > a:only-child:after { content: ''; }

What I want is to achieve this using jQuery or JavaScript. I don't want to use Modernizr or Selectivizr and all that stuff, just a single code as an alternative to only-child.

I would really appreciate if you could help me out. I am a newbie when it comes to jQuery and JavaScript, so please explain thoroughly. Thanks!

mnsth
  • 2,169
  • 1
  • 18
  • 22

2 Answers2

9

jQuery implements most CSS selectors for you, including :only-child, which makes it very easy to use newer selectors to target elements in older browsers. In fact, Selectivizr depends on another JavaScript library such as jQuery in order to implement selectors directly into CSS.

If you can use jQuery you can simply let jQuery handle the :only-child selector, assigning the only child a class which you can then target with your CSS rule. Unlike Selectivizr, jQuery only lets you use selectors within a script, and not directly in a stylesheet1, so you have to make use of a class name instead.

CSS:

.menu li > a:after { content: ' ▾'; }
.menu li > a.only-child:after { content: ''; } /* Notice the class selector */

JS:

$('.menu li > a:only-child').addClass('only-child');

1 There is a known issue with Selectivizr that prevents you from combining pseudo-classes and pseudo-elements in a selector, so you won't be able to use Selectivizr in this case anyway.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    +1 for 'jQuery implements most css selectors for you' – Bhojendra Rauniyar Oct 06 '13 at 09:50
  • Thank you very much for answering - however, I cannot get it to work in IE8 emulation mode (unfortunately, I don't have a VM to test on), but I know that the emulation is not always accurate. – mnsth Oct 06 '13 at 16:57
  • @Simen Mangseth: Does it work in other browsers, including IE9/10/11 in its default rendering mode? – BoltClock Oct 06 '13 at 17:06
  • @BoltClock I haven't applied it to more than IE8 by putting the script and css in an IE8 conditional comment (``). Isn't that the best way? I don't want to add extra JavaScript to supported, modern browsers. – mnsth Oct 06 '13 at 17:16
  • @Simen Mangseth: Yes, but in this case you can always enable it for other browsers temporarily, just to check that it works. If it doesn't then something else might be wrong. – BoltClock Oct 06 '13 at 17:20
  • No, that doesn't work. Now all menu items have an arrow applied to it, as in the IE8 emulation mode. I may have implemented it wrong, though. Thanks again for helping me. – mnsth Oct 06 '13 at 17:47
  • @BoltClock Maybe you would like a link to the actual site - it's located at http://ddcountry.dansas.no If you still want to help me, that would be great. – mnsth Oct 07 '13 at 17:33
  • @BoltClock I've tried the code now in various places - and I think the reason of why it's not working is that it's not adding the class - therefore, the css won't work. Sorry for being a pain in the ass, but I thought you (or someone else) would help me. – mnsth Oct 08 '13 at 09:43
  • You weren't being a pain. I'm sorry I can't be of more help. – BoltClock Oct 08 '13 at 10:10
  • Okay - you won't help me, but I don't know how I could get someone else to. People seem to only answer the "unanswered" questions here, even though the solution didn't work. – mnsth Oct 26 '13 at 13:24
0

For others wondering about this and have the same problem not getting @BoltClock's code to work, it will most probably work if you change $ to jQuery, like this:

jQuery("SELECTOR").exampleMethod("EXAMPLESTRING");
mnsth
  • 2,169
  • 1
  • 18
  • 22