CSS :nth-child(n) selectorThis selector is used for matching the elements based on their position regardless of the type of its parent. The n can either be a keyword, formula, or a number. It is used to match the elements based on their position within a group of siblings. It matches each element, which is the nth-child. SyntaxFollowing are the syntax of this selector: The "n" in the parentheses is the argument that represents the pattern for matching elements. It can be a functional notation, even or odd. Odd values represent the elements whose position is odd in series like 1, 3, 5, etc. Similarly, the even values represent the elements whose position is even in series like 2, 4, 6, etc. Functional notation (An+B): Functional notation represents those elements whose siblings position match the An+B pattern, where A is the integer step size, n is any positive integer starting from 0, and B is the integer offset. Let' see some illustrations. Example1In this example, we are using the functional notation 3n+4 that will represent the elements: (3×0)+4 = 4, (3×1)+4 =7, and many more. Test it NowExample2In this example, we are going to use odd and even keywords that match those elements whose index is odd or even. It is to be noted that the first child index is 1. Test it Now
Next TopicCSS sticky
|