How to get specific number of child elements using CSS? Last Updated : 01 Oct, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report The :nth-child() CSS pseudo-class is used to style elements based on their position in a parent element's child list. This selector allows you to target elements in a specific position or match them based on patterns such as odd or even positions, or by using a linear equation.Syntax:element:nth-child(arg) { /* CSS Properties */} Argument Descriptionswhere arg is an argument that represents the pattern for matching elements. It can be number, odd, even or linear equation. number: It represents the elements whose position is specified by the argument.odd: It represents the elements whose position is odd i.e., 1, 3, 5, etc.even: It represents the elements whose position is even i.e, 2, 4, 6, etc.linear equation: It represents the elements whose position matches the pattern A*n + B, for every positive integer n. Value of n starts with zero.Example 1: Selecting a Specific Child Element by PositionIn this example, we use a specific number as the argument to select the second child of its parent element. html <!DOCTYPE html> <html> <head> <style> p:nth-child(2) { color: green; font-weight: bold; font-size: 20px; } </style> </head> <body> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> </body> </html> Output:Example 2: Selecting Even Child ElementsThis example demonstrates how to use even as the argument to select all even-positioned child elements. html <!DOCTYPE html> <html> <head> <style> p:nth-child(even) { color: green; font-weight: bold; font-size: 20px; } </style> </head> <body> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> </body> </html> Output :Example 3: Selecting Odd Child ElementsHere, we use odd as the argument to select all odd-positioned child elements. html <!DOCTYPE html> <html> <head> <style> p:nth-child(odd) { color: green; font-weight: bold; font-size: 20px; } </style> </head> <body> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> </body> </html> Output :Example 4: Using a Linear EquationIn this example, we use a linear equation as the argument to select elements that match a specific pattern. Here, 3n + 1 selects every third child element starting from the first. html <!DOCTYPE html> <html> <head> <style> p:nth-child(3n + 2) { color: green; font-weight: bold; font-size: 20px; } </style> </head> <body> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> </body> </html> Output: Comment More infoAdvertise with us Next Article How to count child element using jQuery ? A AmanAgarwal6 Follow Improve Article Tags : Web Technologies CSS CSS-Misc Similar Reads How to Select all Child Elements Recursively using CSS? Here are three methods to achieve to Select all Child Elements Recursively using CSS:1. Using the Universal Selector (*)The universal selector applies styles to all child elements within a parent recursively.HTML<html> <head> <style> .parent * { color: blue; font-weight: bold; } 3 min read How to count child element using jQuery ? It is very simple to count the number of child elements in the HTML file using jQuery. For example: If you have a parent element consisting of many children elements then you can use .length or.children().length method as given below. Syntax: var len=$("#parentID").length; or var count = $("#parentI 1 min read How to filter the children of any element using jQuery ? In this article we will learn how to filter the children of any element in JQuery. JQuery is a fast and lightweight JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. It is widely famous for its motto o 3 min read How to style even and odd elements using CSS ? In this article, we will learn how to style even and odd elements using CSS. Styling every element uniformly may not always be the best approach. you'll explore multiple approaches to differentiate between even and odd elements. This is particularly valuable for designing lists, tables, or structure 3 min read How to select all sibling elements of an element using jQuery ? In this article, we will discuss how to select all sibling elements of an element using jQuery. To select all sibling elements of an element, we will use the siblings() method. The siblings() method is used to find all sibling elements of the selected element. The siblings are those having the same 2 min read How to Select All Children of an Element Except Last Child using CSS? When designing and developing web applications, there are scenarios where you may want to apply styles to all child elements of a parent except the last one. For instance, you might want to add a border between items in a navigation menu but not include a border after the last item. This can be achi 2 min read Like