Question

Possible Duplicate:
Complex CSS selector for parent of active child

I want to match a with id “breadCrumb” only if it has a child span id “userName”.

Match:

<div id="breadCrumb" class="nav">
    <span id="userName">esac</span>
</div>

But not match:

<div id="breadCrumb" class="nav">
    <span id="navtrail">...</span>
</div>

I want to set #breadCrumb { display: none; }, but I don’t want to hide it in the second case.

Answer 1

Firstly, these two elements aren’t on the same page are they? If so it’s invalid HTML as you can’t (shouldn’t) duplicate IDs.

You can’t do this with straight CSS. My advice would be to restate the problem:

<div id="breadCrumb" class="nav userName">
    <span>esac</span>
</div>

or

<div id="breadCrumb" class="nav navtrail">
    <span>...</span>
</div>

then you can do things like:

#breadCrumb.navTrail { display: none; }

or

div.nav.navTrail { display: none; }

Applying multiple class selectors (previous example) isn’t supported in IE6.