Question

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");

Answer 1

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”).