Results 1 to 2 of 2

Thread: Can't quite get CSS3 selector right

  1. #1
    Join Date
    Apr 2005
    Essex, United Kingdom

    Can't quite get CSS3 selector right

    Hi. I have the following HTML in my page.

    HTML Code:
    <ul id="detailsList">
            <input type="checkbox" id="showCheckbox" />
            <label for="showCheckbox">Show Details</label>
        <li>content ...</li>
        <li>content ...</li>
        <li>content ...</li>
        <li>content ...</li>
        <li>content ...</li>
    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) {
    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 {
    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
    Akron, OH
    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:

    Or it's real simple with jQuery
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

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