In jquery, first-child and last-child cannot obtain elements. Solution:

Source: Internet
Author: User


Let's use the actual code example to explain how to solve this problem if we have the following HTML code

<a href= "#" class= "button" ><</a>
<a href= "#" class= "button" >></a>
<div id= "F" >F</div>
<div id= "S" >S</div>
<div id= "T" >T</div>
We need to find the last one with the class button, so we can easily write the following code based on the CSS3 pseudo class we know

. button:last-child {
Background-color: #ffd700;
}

After the run found that the second a background color does not change, think of the CSS code must be right, it must be the HTML where there is a problem, after several changes found, HTML and CSS changed to this can be.

<div>
<a href= "#" class= "button" ><</a>
<a href= "#" class= "button" >></a>
</div>
<div id= "F" >F</div>
<div id= "S" >S</div>
<div id= "T" >T</div>
<style>
Div. button:last-child {
Background-color: #ffd700;
}
</style>
At this time I realized, First-child and last-child These 2 are very proud jiao is very capricious, if the father element in the child elements contain other different label, they 2 is very disobedient.

Summarize

So what exactly are they listening to, and after my test, I conclude that

The first child element must be of the same label when it is used. The middle and the last can be different,
Last on the contrary, the final element should be the same, the front and the middle can be different

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.