SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Selector for next div

    Hi all

    I have a demo here - http://www.ttmt.org.uk/tab.html

    It's a smiple tabbed menu using radio buttons

    The html is like this

    Code:
    <div class="tab-group">
        
      <input type="radio" name="tag-group-1" id="rad-1" checked="checked" />
      <label for="rad-1">Business</label>  
      
      <input type="radio" name="tag-group-1" id="rad-2" />
      <label for="rad-2">Personal</label>  
      
      
      <div class="tab-1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>  
      
      <div class="tab-2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
      </div>  
      
    </div>
    The css to display the content is like this

    Code:
    #rad-1:checked ~ .tab-1,#rad-2:checked ~ .tab-2{
      display:block;
    }
    It's using the sibling combinator selector to select the div following the radio button

    If I had the radio buttons in a separate div like so

    Code:
    <div class="tab-group">
      
      <div class="tab-nav">  
        <input type="radio" name="tag-group-1" id="rad-1" checked="checked" />
        <label for="rad-1">Business</label>  
      
        <input type="radio" name="tag-group-1" id="rad-2" />
        <label for="rad-2">Personal</label>  
      </div>
      
      <div class="tab-1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>  
      
      <div class="tab-2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
      </div>  
      
    </div>
    What selector would I use to select .tab-1 or tab-2

    I know I could do this with jquery but can I do it with CSS?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You would need a parent selector which doesn't exist yet so it can't be done. The inputs must have the divs as siblings otherwise you can't target them.

    You could use :target to make the divs display:block but that means you can't have any other in-page links or the target in those divs is lost.


Bookmarks

Posting Permissions

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