Forums

ysamjo

Hi there,

I want the Selector for the first occurence on thte whole page of a specific class (let's say "foo"). I don't know the exact ancestor.

Is there a Pseudo-Selector that I'm missing?

Robskiwarrior

":first" ?

you got any example code? :D

chriscoyier

It's actually :first-child

So

.foo:first-child {
   ... stuff ...
}

it's not super well supported in all browsers though... You might consider using :first inside of jQuery instead.

$(\".foo:first\").css( ... stuff ... );

which abstracts the cross-browser crap and actually works =)

Robskiwarrior

ahh yes thats the one :D

ysamjo

Yay, i've been aware of :first-child, but foo:first-child matches the first child from foo and not foo itself, doesn't it?

Robskiwarrior

<div id="foo">
text
text
text
text
text
</div>

to select the above you would need to use:

#foo p:first-child { font-weight:bold; }

basically - adding the first-child pseudo makes the first child of that element inside whatever its in - bold.

Does that make any sense LOL

ysamjo

Well that's my problem...

To clarify:

<div class="foo">
text
text
text
text
text
</div>

<div class="foo">
text
text
text
text
text
</div>

And now I don't want to make the first p bold, but the first div. And as I said I don't know the upper element of the dix class.

ikthius

"ysamjo" said:
Well that's my problem...

To clarify:

<div class="foo">
text
text
text
text
text
</div>

<div class="foo">
text
text
text
text
text
</div>

And now I don't want to make the first p bold, but the first div. And as I said I don't know the upper element of the dix class.

if you give us a hint at the code, some people might find the parent for you

iopet

Wrap the .foo divs inside another div, like so:

<div id=\"lotsafoos\">

<div class=\"foo\">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>

<div class=\"foo\">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>

<div class=\"foo\">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>

</div>

Then add:

#lotsafoos .foo:first-child{font-weight:700}

or using jQuery

$(function(){
$(\"#lotsafoos .foo:first\").css(\"font-weight\",\"700\");
});

jocke76

Hey

Maybe the thread is dead .. anyways..
and maybe you only want the css-sollution..

But with javascript you could...

... According to w3c

The getElementById() method returns a reference to the first object with the specified ID.

(http://www.w3schools.com/HTMLDOM/met_doc_getelementbyid.asp)

It don't know how reliable that is though..

/Jocke

treehouse : what would you like to learn today?

Forums

Match first element