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?

I'm afraid that's not doable, that's the conclusion from http://stackoverflow.com/questions/2751127/how-can-i-select-first-second-or-third-element-with-given-class-name-using-css — Ruan Mendes, Jan 14 '14 at 18:21
This is the closest you can probably get with css, but it will fail in certain cases (like the one in the fiddle) http://jsfiddle.net/gwa42/. There's no way to go back up in the document tree if the first title is inside a div and there are others outside that div but inside another div. — brouxhaha, Jan 14 '14 at 18:30

Felipe Miosso · Accepted Answer · 2014-01-14T19:08:41.813

3

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 =|

edited Jan 14 '14 at 19:08

answered Jan 14 '14 at 18:15

Felipe Miosso

7,309
6
44
55

But it can happen in a unknown number of levels, bay be `#container > .here` or `#container > * > .here` or `#container > * > * > .here` and so on... – Tiago Pimenta Jan 14 '14 at 18:20
Oh... I see, now. The name of the class could change, too? – Felipe Miosso Jan 14 '14 at 18:22
No, but may happen other styles for the same class in other cases, that is why the name can not change and it need to be applied for the first incidence. – Tiago Pimenta Jan 14 '14 at 18:25
3

I think this is a misunderstanding: as I read it, the OP wants to find the first instance of `.title` — regardless of nesting or whether it is the `:first-child`… – Barney Jan 14 '14 at 18:41
Almost it, @brouxhaha found a gap. – Tiago Pimenta Jan 14 '14 at 18:45
@Barney I want a selector like jQuery(":first"), it is not the first child (of its parent), it is the first element from all context inside the #content regardless the complexity of levels – Tiago Pimenta Jan 14 '14 at 18:49
2

@Tiago I know; and I'm afraid it isn't possible :( — even [CSS4](http://dev.w3.org/csswg/selectors4/) doesn't provide an API for this. – Barney Jan 14 '14 at 18:52
1

I don't think you can count on there being a `.title` in the first set of divs - if there aren't any, this breaks again: http://jsfiddle.net/H5hHj/10/. – brouxhaha Jan 14 '14 at 18:54
Thanks for the effort, folks! Should I mark this answer as right or leave it? – Tiago Pimenta Jan 14 '14 at 19:05

Emmanuel John · Answer 2 · 2014-01-15T00:00:24.507

1

Your best bet is use Jquery or javascript

$(".title:first").css( "color", "red" );

edited Jan 15 '14 at 00:00

answered Jan 14 '14 at 18:26

Emmanuel John

2,296
1
23
30

1

Yeah, but let us hope some more time, maybe there is another answer. – Tiago Pimenta Jan 14 '14 at 18:32
This is a comment, not an answer. If you add a javascript solution then it would be an answer, but as it is this does not answer the question at all – Zach Saucier Jan 14 '14 at 18:54

CSS select first element regardless its levels

2 Answers2