dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Can't quite get CSS3 selector right

  1. #1
    Join Date
    Apr 2005
    Location
    Essex, United Kingdom
    Posts
    187

    Can't quite get CSS3 selector right

    Hi. I have the following HTML in my page.

    HTML Code:
    <ul id="detailsList">
        <li>
            <input type="checkbox" id="showCheckbox" />
            <label for="showCheckbox">Show Details</label>
        </li>
        <li>content ...</li>
        <li>content ...</li>
        <li>content ...</li>
        <li>content ...</li>
        <li>content ...</li>
    </ul>
    I am unable to change this HTML. I have hidden all LI's with the exception of the first by using the following CSS

    HTML Code:
    ul#detailsList li:nth-child(1n+2) {
        display:none;
    }
    So far so good. What I want to do now is to show those hidden LI's when the the checkbox is ticked, using pure CSS. My best attempt so far is

    HTML Code:
    ul#detailsList li input#showCheckbox:checked + li {
        display:block;
    }
    Obviously this doesn't work, as the + li will only select LI's immediately after the checkbox (i.e. siblings), not siblings of the parent.

    Is this possible?

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Hmmm ... sounds tricky. I'll be anxious to see if anyone has an elegant solution for this, because I'm stumped. You may have to use sass:
    http://sass-lang.com/

    Or it's real simple with jQuery
    http://jsfiddle.net/eKEBM/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles