SitePoint Sponsor

User Tag List

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

    sibling + sibling + sibling > child... possible?

    I'm looking to apply a style to a child element, when its parent's target sibling is present

    For example, I've got three divs A, B & C...

    <div class="a">stuff</div>
    <div class="b">stuff</div>
    <div class="c">stuff<div class="cc"></div></div>

    In this case, I want to apply special formatting to "cc", only when "a" is present in the markup.

    Can I use....

    a + b + c > cc {rules...}

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well, why don't you just try it and find out?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    
    Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
    
    transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" 
    
    lang="en-US"> 
    <head> 
    <base 
     <title>OGS Nav</title> 
     <meta http-equiv="Content-Type" content="text/html; 
    
    charset=UTF-8" />
    <style>
    .a + .b + .c .cc{background:red;}
    </style> 
    </head> 
     
    <body>
    <div class="a">stuff</div>
    <div class="b">stuff</div>
    <div class="c">stuff<div class="cc">asdf</div></div> 	  
    </body> 
    </html>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Well, why don't you just try it and find out?
    Yep. On my first attempt after reading the spec (before posting this question here), I realize now that I was missing a descendent selector, which led me to think it would not work.

    Now that I see, and with your helpful example, I'm good. Thanks for the nudge

    Sibling > Child selectors are pretty cool.

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @RyanReese: you have a typo: <base. and your example doesn't work in ie6.

    @Scott Blanchard: this one will:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en" dir="ltr"><head>
      <meta	http-equiv="Content-Type"	content="text/html; charset=utf-8">
      <meta	http-equiv="Content-Language"	content="en">
      <title>OGS Nav</title> 
      <style> 
        div div {background:red;} // for ie6
        div + div + div div{background:red;} //for the rest of them
      </style>
    </head><body>
        <div>stuff</div>
        <div>stuff</div>
        <div>stuff<div>asdf</div></div> 	  
    </body></html>
    although it's not what you've asked

    just so you know, > selector (selects an element that is a child of another element), + selector (selects an element that is a next sibling of another element) are not supported in ie6.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    @RyanReese: you have a typo: <base. and your example doesn't work in ie6.
    I opened up my coding file and from a previous thread I just deleted the code in there, highlighted/deleted etc. It was merely an example anyway.

    @OP, your example in your first post didn't work due to having no content in the child element .cc

    And + and > aren't supported in IE6, I assume the OP knows that if he's trying this.....
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •