Grow your CSS skills. Land your dream job.

Match first element

  • # January 8, 2009 at 2:48 pm

    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?

    Rob
    # January 8, 2009 at 4:55 pm

    ":first" ?

    you got any example code? :D

    # January 8, 2009 at 9:41 pm

    It’s actually :first-child

    So

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

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

    Code:
    $(“.foo:first”).css( … stuff … );

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

    Rob
    # January 9, 2009 at 3:57 am

    ahh yes thats the one :D

    # January 12, 2009 at 8:36 am

    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?

    Rob
    # January 12, 2009 at 9:04 am

    <div id="foo">
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    </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

    # January 18, 2009 at 5:54 am

    Well that’s my problem…

    To clarify:

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

    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.

    # January 18, 2009 at 6:26 am
    "ysamjo" wrote:
    Well that’s my problem…

    To clarify:

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

    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

    # January 19, 2009 at 8:30 am

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

    Code:

    text

    text

    text

    text

    text

    text

    text

    text

    text

    text

    text

    text

    text

    text

    text

    Then add:

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

    or using jQuery

    Code:
    $(function(){
    $(“#lotsafoos .foo:first”).css(“font-weight”,”700″);
    });
    # January 22, 2009 at 4:38 am

    Hey

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

    But with javascript you could…

    … According to w3c

    Quote:
    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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".