SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Conditional Descendent & Sibling selector question

    "When menu is present as a child of header set the top margin of content (whose parent is a sibling of header) to 100 pixels. Otherwise, set it to zero"

    Here is the markup...

    HTML Code:
    <div class="header">
      <div class="sitetitle">site title</div>
      <div class="tagline">tagline</div>
      <div class="menu">menu</div>
    </div>
    
    <div class="main">
      <div class="content">content goes here</div>
    </div>
    And I want to increase the top margin of the "content" div only when the "menu" div is present in the markup.

    I'm trying to use a combination of sibling and descendent/child selectors to account for this case, but its not working.

    Am I supposed to be able to do this...?

    Code:
    .content {margin-top:0;} //when menu is NOT present
    .header > .menu ? .content {margin-top:100px;} //when menu IS present
    "When menu is present as a child of header set the top margin of content to 100 pixels. Otherwise, set it to zero"

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

    No I'm afraid you can't do that.

    When you target an element with CSS you end up at that element and you can't then say go back to the parent and now pick an adjacent sibling.

    The nearest you could get is to select the following div based on the class being on the parent and not one of it's children.

    e.g.Very modern browsers only.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .content {margin-top:100px;background:red} /*when menu IS present*/
    .header:not(.menu) + div .content {margin-top:0;background:transparent} /*when menu class IS NOT present in parent*/
    
    
    </style>
    </head>
    
    <body>
    <div class="header menu">
      <div class="sitetitle">site title</div>
      <div class="tagline">tagline</div>
    </div>
    
    <div class="main">
      <div class="content">content goes here</div>
    </div>
    </body>
    </html>

    Or more normally with attribute selectors:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .content {margin-top:0;} /*when menu IS NOT present*/
    .header[class*='menu'] + div .content {margin-top:100px;background:red} /*when menu class IS present in parent*/
    
    </style>
    </head>
    
    <body>
    <div class="header menu">
      <div class="sitetitle">site title</div>
      <div class="tagline">tagline</div>
    </div>
    
    <div class="main">
      <div class="content">content goes here</div>
    </div>
    </body>
    </html>

    You can't select a parent based on its child though. You can reach the child but then you are stuck at the childs level and could only select more adjacent siblings of that child.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You can target parent elements with JavaScript, so if you really need this functionality, it might be worth asking this in the JS forum.


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
  •