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

HTML & CSS
1

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

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…

3

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 :slight_smile:

Sibling > Child selectors are pretty cool.

4

Well, why don’t you just try it and find out? :slight_smile:

<!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>
5

@RyanReese: you have a typo: <base. and your example doesn’t work in ie6.

@Scott Blanchard: this one will:

<!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 :slight_smile:

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.