How to dynamically append li to ul?

What is the best way to highlight with CSS next html <li> element/question in a form for easier to navigate on long forms?

• I have a long 200 question personality type test that I am building as a single page website. I am building this site on Wordpress and using Gravity Forms, which uses a bit too much code but otherwise works great.  Here is an example of the code (I edited out the classes and IDs for easier reading):                               <ul> <li> <!-- HIGHLIGHT THIS ELEMENT IN ITS ENTIRETY WITH A GLOW OR SOMETHING... --> <label>1. Do you like dogs? </label> <div> <ul> <li> <input name='input_1' type='radio' value='+'  id='choice_1_0' tabindex='1'    /> <label for='choice_1_0'>+</label> </li> <li> <input name='input_1' type='radio' value='?'  id='choice_1_1' tabindex='2'    /><label for='choice_1_1'>?</label> </li> <li> <input name='input_1' type='radio' value='-'  id='choice_1_2' tabindex='3'    /> <label for='choice_1_2'>-</label> </li> </li> <!-- END OF HIGHLIGHT --> <!-- NEXT QUESTION --> <li> <!-- HIGHLIGHT THIS ELEMENT IN ITS ENTIRETY WITH A GLOW OR SOMETHING... --> <label>1. Do you like cats? </label> <div> <ul> <li> <input name='input_2' type='radio' value='+' id='choice_1_0' tabindex='1' /> <label for='choice_1_0'>+</label> </li> <li> <input name='input_2' type='radio' value='?' id='choice_1_1' tabindex='2' /><label for='choice_1_1'>?</label> </li> <li> <input name='input_2' type='radio' value='-' id='choice_1_2' tabindex='3' /> <label for='choice_1_2'>-</label> </li> </li> <!-- END OF HIGHLIGHT --> <!-- 200 QUESTIONS total --> </ul> The action I would like to create is that when the user selects one of the radio boxes, the form automatically highlights or boldens or otherwise indicates the next question? Please let me know if this is clear.  Thank you.

• Answer:

  One, I have to get this off my chest (sorry) but a 200 question single page form is a fuster cluck. Don't do it man, don't do it. If there's just one error (human or technology) along the way a lot of effort could be lost. If you think someone is going to answer 150 questions, lose that and then start over...think again. You'd be wise to break it into sections and then do a submit / save as you go. Just looking at a page of 200 questions say, "Go away. Run!!!". :) Two, and again pardon me for not getting to your question yet, the effect you describe strikes me as heavy handed and over the top. In other words, it's not necessary. If next isn't obvious then there's something seriously flawed with your layout. I'm not sure of the IQ of your target audience but if 8 isn't the follow up to 7 then perhaps you need a test to take the test? :) Have you seen this effect elsewhere? If so, steal it from that site. If not, stop and think for a moment, "Why is that?" (Hint: See point two above.) If you still insist on going forward then you can probably get by using a pseudo-class or two: http://css-tricks.com/pseudo-class-selectors/ If not, then it might entail some javascript / jquery.