How do I match a parent who has a specific child?

Question

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

It's not possible by design. Duplicate question.

Answer 2

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.