CSS select first element regardless its levels

Question

I can not assure the level of my condition, but it should be the first incidence. I am almost sure there is no way, but only for assertion:

Here is some HTML sample:

<div id="container">
  <div class="title"></div>
</div>

So my selector might be #container .title, but let us imagine .title may appear at more than one level inside #container and it need to be labeled as it is, then more strictly I do #container > .title. Despite not always it will be the only one happening in that level, so I do #container > .title:first-child.

Ok, although not always it will be the first level, so I regress to ensure that by doing #container .title:first-child, but it breaks with several levels:

<div id="container">
  <foo>
    <div class="title"></div>
  </foo>
  <bar>
    <div class="title"></div>
  </bar>
</div>

Both will be selected, I want only the first incidence. Is there any way to do that with CSS selectors?

Answer 1

You can use the universal selector.

#container > *:first-child > .title:first-child { color:red; }

fiddle: http://jsfiddle.net/felipemiosso/H5hHj/

Edited: See if is that what you need: http://jsfiddle.net/felipemiosso/H5hHj/3/

Edited 2: I don't know if it is allowed in your case, but take a look: http://jsfiddle.net/felipemiosso/H5hHj/9/

Edited 3: After a few tries ... the final answer is: NOT POSSIBLE =|