CODEWITHSUNDEEP
javascriptjqueryhtmlcss-selectors
Tono Nam
Tono Nam

Reputation: 36048

not able to select first child with jquery

I don't understand what am I doing wrong. I have the following html element:

<div id="accordion">
    <h3>
        <a href="#">Section 1</a></h3>
    <div>
        <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque.
            Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a
            nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada.
            Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
    <h3>
        <a href="#">Section 2</a></h3>
    <div>
        <p>
            Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus
            hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum
            tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
        </p>
    </div>                                    
</div>

this element (<div id='accordion'>) clearly shows that it's first child is the h3 tag the next child is the div tag then the h3 etc

I want to select the fist child of this div. In other words I want to select the first h3 tag

as a result I have tried:

    $("#accordion:first-child").css("font-size","30px");

also

     $("#accordion:first").css("font-size","30px");

both ways applies a font of 30px to the main div element (<div id='accordion'>)

what am I doing wrong I want to only select the first child of the accordion it clearly is the h3 tag

Edit

whow I was just missing a space. this page did not includes the pace.

I had to change my code from

$("#accordion:first").css("font-size","30px");

TO

$("#accordion :first").css("font-size","30px");

Upvotes: 7

Views: 9306

Answers (6)

Prabhakar
Prabhakar

Reputation: 6754

There is a different between using jquery first-selector and first-child selector.

Since you've multiple first-child elements you should use first selector only otherwise it can all first-child elements as @Jose mentiond.

$("#accordion h3:first").css("font-size","30px");

 OR


 $("#accordion h3:first").css("font-size","30px");

Either way it should work!

Upvotes: 0

DefyGravity
DefyGravity

Reputation: 6011

$(":first", "#accordion").css("font-size", "30px")

Upvotes: 0

Jose Faeti
Jose Faeti

Reputation: 12302

You have to separate the id of the parent from the :first-child selector. Also, the frst-child selector will select all the first-child elements, not only one. To select only one you have to use the :first selector.

$("#accordion h3:first").css("font-size","30px");

This is the way css selectors (which jQuery heavily uses) works.

Take a read at css descendant selector here.

At times, authors may want selectors to match an element that is the descendant of another element in the document tree (e.g., "Match those EM elements that are contained by an H1 element"). Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by white space.

Also, according to the jQuery docs, there are better methods to retrieve the first child of an element, to achieve better performance.

Because :first is a jQuery extension and not part of the CSS specification, queries using :first cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :first to select elements, first select the elements using a pure CSS selector, then use .filter(":first").

Upvotes: 12

Chad
Chad

Reputation: 19609

Read up on the :first-child selector, what you are looking for is:

$('#accordion h3:first-child').css('font-size', '30px');

From jQuery API Docs:

Description: Selects all elements that are the first child of their parent.

So the selector #accordion:first-child is the #accordion element that is the first child of its parent; while #accordion h3:first-child is an h3 contained within #accordion that is the first child of it's parent.

Upvotes: 2

ranjez
ranjez

Reputation: 349

Try this: 

$('#accordion').children().first().css(...

Upvotes: 1

Šime Vidas
Šime Vidas

Reputation: 185893

This

$( '#accordion' ).children( ':first' ).css( ...

Upvotes: 1

Related Questions