| SitePoint Sponsor |
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...}
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
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.Originally Posted by RyanReese
Well, why don't you just try it and find out?
Now that I see, and with your helpful example, I'm good. Thanks for the nudge
Sibling > Child selectors are pretty cool.
@RyanReese: you have a typo: <base. and your example doesn't work in ie6.
@Scott Blanchard: this one will:
although it's not what you've askedHTML 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>
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.
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
Posting Permissions
Bookmarks