Conditional Descendent & Sibling selector question

HTML & CSS
1

“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…

<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…?

.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

You can target parent elements with JavaScript, so if you really need this functionality, it might be worth asking this in the JS forum.

3

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.


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


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