How to hide first li in ul?

Question

I want to hide first li in a drop down in ul which has the ID "#ctl00_blInfo".

Below is css that I am using :

ul#ctl00_blInfo li:first-child { display : none }

Which is working fine except that I am getting an issue in ie7 where entire ul is hiding and it's not letting the drop down open.

<ul>
    <li>a</li>
    <li>b</li>
    <li><!--Drop down section-->
        <ul id="ctl00_blInfo">
            <li>aa</li>
            <li>bb</li>
            <li>cc</li>
        </ul>
    </li>
</ul>

I'd like to help, but is there an easy way to test IE7 in Windows 7? Is IE11's "IE7 Browser mode" replicating the issue? — blex, Jun 08 '15 at 18:19
@blex Yes. Free virtual machines on http://modern.ie, and streamable access via http://browserstack.com. — Sampson, Jun 08 '15 at 18:20
http://stackoverflow.com/questions/14758161/css-first-child-selector-ie7 — epascarello, Jun 08 '15 at 18:26

score 1 · Answer 1 · answered Jun 08 '15 at 18:26

Your issue seems to be with the comment you have. For some reason IE7 bugs out and interprets the comment as an actual element. Try removing the comment and it should work as expected.

http://robertnyman.com/2009/02/04/how-to-solve-first-child-css-bug-in-ie-7/

score 0 · Answer 2 · answered Jun 08 '15 at 18:43

0

Yes, actual comments are taken as 'first child' in oder versions of IE. Either remove the comment or move it somewhere else.

answered Jun 08 '15 at 18:43

Pablo Rincon

999
10
23

How to hide first li in ul?

2 Answers2