Failed to select first child with jquery

Question

I do not understand what I am 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 the first child is the h3 tag, the next child is the div tag, and then h3, etc.

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

As a result, I tried:

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

and

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

in both directions, a 30px font is applied to the main div element ( <div id='accordion'> )

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

Edit

Whom I just lacked a space. this page did not include pace.

I had to change the code from

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

TO

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

Answer 1

You need to separate the parent id from the :first-child selector. In addition, the frst-child selector will select all elements of the first-junior, and not just one. To select only one, you must use the :first selector.

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

This is how the css selector (which uses jQuery) works.

Read the css descendant selector here.

Sometimes, authors may want the selectors to correspond to an element that is a descendant of another element in the document tree (for example, “Match” those EM elements that are contained by the H1 element.) Selectors express this relationship in the template. The child selector consists of two or more selectors separated by white space .

Also, according to jQuery docs, there are better methods for extracting the first child to achieve better performance.

Because: firstly, this is a jQuery extension, and not part of the CSS specification, queries using: at first, they can’t take advantage of the performance enhancement provided by the built-in DOM request of the SelectorAll () method. For best performance when using: first select the elements, first select the elements using a clean CSS selector, then use .filter (": first").

Answer 2

In the section :first-child read what you are looking for:

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

From jQuery API Docs:

Description : A selection of all the elements that are the first child of their ancestor.

Thus, the #accordion:first-child selector is the #accordion:first-child element, which is the first child of its parent; and #accordion h3:first-child is the h3 contained in #accordion , which is the first child of its parent.

Answer 3

it

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

Answer 4

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

Answer 5

Try the following:

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

Answer 6

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

Since you have several elements with a first child, you must use the first selector, otherwise, otherwise all elements of the first child will be marked as @Jose.

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

In any case, this should work!