This article introduces the usage skills of `:nth-child()` selector in CSS, focusing on how to select multiple child elements at specific positions at the same time. Although `:nth-child()` itself does not support directly passing in multiple values, it can achieve similar effects by combining multiple selectors. This article will provide detailed sample code and explanations to help you better understand and apply the `:nth-child()` selector.

The CSS :nth-child() selector is a powerful tool that allows you to select elements based on their position within their parent element. However, it does not directly support specifying multiple index values ??in a single :nth-child() selector. This means you cannot directly select the second and third child elements like nth-child(2, 3). However, you can achieve a similar effect by combining multiple selectors.

Use comma separated selectors

The simplest way is to separate multiple :nth-child() selectors with commas (,). The comma represents an "or" relationship in CSS, so the browser will apply the style to all elements that match either selector.

The following code demonstrates how to use this method to select the second and third

child elements under the parent element div.modal-content and set their background color to red:

 div.modal-content > p:nth-child(2),
div.modal-content > p:nth-child(3) {
  background-color: red;
}

HTML structure example

In order to better understand the role of the above CSS code, here is a corresponding HTML structure example:

 <div class="modal-content">
  <span class="close-button">Button Example</span>
  <p>Element 2</p>
  <p>Element 3</p>
  <p>Element 4</p>
  <p>Element 5</p>
  <p>Element 6</p>
</div>

In this example, :nth-child(2) will select the second

element (the paragraph with the content "Element 2"), and :nth-child(3) will select the third

element (the paragraph with the content "Element 3").

Select non-consecutive elements

The above method is also suitable for selecting discontinuous elements. For example, to select the third and fifth

elements, you would use the following CSS code:

 div.modal-content > p:nth-child(3),
div.modal-content > p:nth-child(5) {
  background-color: red;
}

How :nth-child() works

It's crucial to understand how :nth-child() works. It selects the nth child element under the parent element, and then checks whether that element matches the selector (in this case, the

element). If the second child element of the parent element is not a

element, :nth-child(2) will not select any element.

Use :nth-of-type() as an alternative

If you want to select based on child elements of a specific type, you can use the :nth-of-type() selector. The :nth-of-type() selector only considers child elements of the specified type. For example, p:nth-of-type(2) will select the second

element within the parent element, ignoring other types of child elements.

Summarize

Although the :nth-child() selector itself does not support directly specifying multiple index values, by combining multiple selectors, you can easily select multiple child elements at specific positions. Remember that the :nth-child() selector selects the nth child element among all children, while the :nth-of-type() selector only considers child elements of the specified type. Choosing the appropriate selector based on your specific needs gives you more precise control over CSS styling.

The above is the detailed content of Output format requirements: Use CSS's :nth-child() selector to select multiple elements at the same time. For more information, please follow other related articles on the PHP Chinese website!