Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3

Use the :nth-child(n 3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3. The specific code example is as follows:

HTML code:

<div id="container">
  <div class="item">第一个子元素</div>
  <div class="item">第二个子元素</div>
  <div class="item">第三个子元素</div>
  <div class="item">第四个子元素</div>
  <div class="item">第五个子元素</div>
  <div class="item">第六个子元素</div>
  <div class="item">第七个子元素</div>
</div>

CSS code:

.item:nth-child(n+3) {
  color: red;
}

Explanation:
In the above code, we use the nth-child(n 3) selector to select child elements with a position greater than or equal to 3, and give The text color of these child elements is set to red.

:nth-child(n 3) pseudo-class selector means to select child elements whose position is greater than or equal to 3. Among them, n represents any natural number, and 3 represents counting starting from the 3rd sub-element.

In the above code, we set the id of the container element to "container" and the class name of the child element to "item". Then use CSS to set the text color of child elements greater than or equal to position 3 to red.

Result:
According to the above code, the text color of the third sub-element, the fourth sub-element, the fifth sub-element and subsequent sub-elements will be set to red, while the text of the first two sub-elements will be set to red Colors remain default.

Using the nth-child(n 3) pseudo-class selector can easily select child elements with a position greater than or equal to 3, and set their styles accordingly. This is very useful in some specific layout needs and can help us better achieve page effects.

The above is the detailed content of Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3. For more information, please follow other related articles on the PHP Chinese website!