nth-child() is a pseudo-class selector in CSS3. The JQuery selector inherits part of CSS syntax, allowing fast and accurate selection of DOM elements through label names, attribute names, and content.
This article explains the usage and uses of nth-child in jquery and css3 by making processing and changes to the div content in the following html.
<div > <p>title1</p> <p>content1</p> <p>title2</p> <p>content2</p> <p>title3</p> <p>content3</p> <p>title4</p> <p>content4</p> </div>
CSS3 pseudo-class selector: nth-child()
:nth-child(n) selector matches the nth child element in the parent element, and there is no limit on the element type.
n can be a number, a keyword, or a formula.
Several uses of nth-child()
1: nth-child(number) directly matches the number element. The parameter number must be an integer greater than 0.
Two: nth-child(an) matches all elements with multiples a. The letter n in the parameter an is indispensable, it is a sign of multiple writing, such as 3n and 5n
3: nth-child(an+b) and :nth-child(an-b) first group the elements. Each group has a, b is the sequence number of members in the group. The letter n and the plus sign are not default, and the position cannot be changed. This is the sign of this writing method, where a and b are both positive integers or 0. Such as 3n+1, 5n+1. But the plus sign can become a negative sign, and at this time the a-b in the group is matched.
4: nth-child(-an+b) Are there negative and positive, none of which cannot be defaulted, otherwise it will be meaningless. At this time, it is similar to:nth-child(an+1), and both match the first one, but the difference is that it calculates backwards and starts from bth, so it will not match at most b.
5: nth-child(odd) and :nth-child(even) match elements with odd and even numbers respectively. Odd numbers (odd) are the same as (2n+1) results; even numbers (even) are the same as (2n+0) and (2n) results.
css3 implements interlaced color change
Add css, all the titles are red everywhere, the code is as follows:
#content p:nth-child(2n+1) {
background-color: red;
}jQuery :nth-child() selector
:nth-child(n) The selector selects all elements of the nth child element of its unlimited type belonging to its parent element.
grammar
:nth-child(n|even|odd|formula)
| parameter | describe |
|---|---|
| n | The index of each child element to match. Must be a number. The index number of the first element is 1. |
| even | Select each even child element. |
| odd | Select each odd child element. |
| formula | Specifies which child element needs to be selected through the formula (an + b). Example: p:nth-child(3n+2) Select each third segment and start with the second child element. |
jQuery implements interlaced color change
<script type="text/javascript">
$(function(){
$("#content p:nth-child(odd)").css("color","red");
});
</script>jQuery replaces p tag to h2 tag, content remains unchanged
<script type="text/javascript">
$(function(){
$("#content p:nth-child(odd)").each(function(){
$(this).replaceWith('<h2>'+$(this).html()+'</h2>');
});
});
</script>This is the article about the usage and usage examples of nth-child in jquery and css3. For more related nth-child content in jquery and css3, please search for my previous articles or continue browsing the related articles below. I hope you will support me more in the future!