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

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.

You could solve this using some JS. I'd initially have the breadcrumb hidden in CSS and then show it using JS on page load. — Corey Ballou, Dec 16 '09 at 23:29
It's not possible by design. [Duplicate question](http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child). — Kornel, Dec 16 '09 at 23:27

score 0 · Accepted Answer · answered Dec 16 '09 at 23:34

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.

Nope, they are not on the same page. On this site, I am allowed to customize CSS, but it applies to every page on the site. — esac, Dec 17 '09 at 00:04

1 Answers1