:last-child is used to select the last child element under the parent element, and the type must match. For example, li:last-child can remove the last li border; but if the last child element is not a specified type, it will not take effect. Recommended usage includes scenarios such as removing the last item border of the list, and the last item can be excluded by:not(:last-child). :nth-child(n) flexibly selects the nth child element. n can be a number, odd/even or an expression, such as tr:nth-child(even) sets the background color of the odd row of the table. Note: It is based on all child elements counts, non-similar elements are also counted in order, and n starts at 0. Common misunderstandings include structural changes affecting styles, confusion with:last-of-type, and expression writing errors. The methods to avoid pitfalls are preferred: nth-of-type, use test tools to verify expressions, and avoid making key styles on dynamic content dependence on structural order. Mastering these pseudo-classes can reduce JS and class operations and improve CSS layout efficiency.

Sometimes you want to select an element separately, such as the last or the last child element, and then ordinary CSS selectors may not be enough. CSS provides some pseudo-classes, such as :last-child and :nth-child , which are specifically used to deal with such situations.

How to use :last-child to accurately select the last child element?

The function of :last-child is to select the last child element under the parent element. The premise is that this element must be really "last" and the type must match.

For example, if you have a set of <li> elements wrapped in <ul></ul> and want the last <li> to not display the border:

 li:last-child {
  border-bottom: none;
}

This way, it skips the hassle of traversing the DOM or adding additional class. But be aware: if the last child element is not <li> but another tag, such as <div> , then this rule will not take effect.

Recommended usage:

<li> Used to remove common scenarios such as borders and spacing in the last item of the list.<li> Make sure that the target element is indeed the last child element, otherwise it will not take effect.<li> If you want to exclude the last one, instead of just choosing it, use :not(:last-child) .

How to use :nth-child to flexibly select child elements at specific locations?

:nth-child(n) is more flexible, and the nth child element can be selected. n can be a number, keyword (such as odd , even ) or an expression (such as 2n 1 ).

For example, if you want to change the background color every other line to distinguish it, you can write it like this:

 tr:nth-child(even) {
  background-color: #f2f2f2;
}

For example, if you want to select the third <div> , you can write it as:

 div:nth-child(3) {
  color: red;
}

Things to note:

<li> :nth-child is based on all child elements under the parent element to calculate the order, not just elements of the same type. <li> n in the expression counts from 0, so 2n 1 is actually an odd term. <li> The keyword odd and even are very convenient, suitable for scenes such as tables and picture lists that require alternating styles.

What are the easy places to get stuck when using these pseudo-classes?

Although these two pseudo-classes are easy to use, there are several details that are prone to errors:

<li> If the order of child elements changes, the style will also change : for example, if you insert a new element into HTML, it may cause the position of the originally selected element to change, thereby affecting the style. <li> Confused with :last-of-type and :nth-of-type : :last-child requires it to be the last child element, while :last-of-type is as long as it is the last one of the type. <li> The expression is easy to make mistakes : for example, n 3 means to choose from item 3, while 3n is to choose every three items.

To avoid these problems:

<li> When you are not sure whether the structure is fixed, use :nth-of-type first. <li> When writing expressions, you can find the "pseudo-class test tool" online to verify the effect. <li> Try to avoid relying on structural order to make key styles, especially dynamic content.

Basically that's it. Pseudo-classes are a small function, but they are very practical in actual development. Mastering them can help you write less JS and add less class, and solve many layout problems directly through CSS.

The above is the detailed content of Using CSS pseudo-classes like `:last-child` or `:nth-child`. For more information, please follow other related articles on the PHP Chinese website!