CSS :nth-child() Selector Last Updated : 12 Nov, 2024 Comments Improve Suggest changes Like Article Like Report The :nth-child() pseudo-class selector targets elements based on their position among siblings, making it ideal for dynamic styling. It can select elements using specific positions (e.g., first, odd, or even), or patterns like An+B. This flexible CSS tool improves web design by simplifying how you apply styles to elements in lists, tables, or repetitive structures.Syntax:nth-child(number) { // CSS Property}Where,number: This represents the pattern for matching elements. It can be a specific number, odd, even, or a formula like An+B, where A defines the step size and B is an offset.odd: Targets elements at odd positions (1, 3, 5, etc.) within their parent container.even: Targets elements at even positions (2, 4, 6, etc.) among their siblings.Functional Notation (An+B): Matches elements whose positions follow the pattern An+B. Here, A is the interval (step size) and B is the offset.Example 1: The :nth-child(2n+1) selector is used to target every odd <li> element, applying a green background and white text. This effectively styles the first, third, fifth, and other odd list items. HTML <!DOCTYPE html> <html> <head> <title>CSS :nth-child Selector Example</title> <style> /* Applying styles to every odd <li> element */ li:nth-child(2n+1) { background: green; } </style> </head> <body> <h1>CSS :nth-child() Selector Example For odd lists </h1> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> </body> </html> Output Example 2: The :nth-child(2n) selector is used to target every even <li> element, applying a blue background and white text. This effectively styles the second, fourth, sixth, and other even list items. HTML <!DOCTYPE html> <html> <head> <title>CSS :nth-child Selector Example</title> <style> /* Applying styles to every even <li> element */ li:nth-child(2n) { background: green; } </style> </head> <body> <h1>CSS :nth-child() Selector Example for Even Lists</h1> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> </body> </html> Output The :nth-child() CSS selector helps you target specific elements based on their position, such as odd or even items. Mastering this selector allows for more dynamic and responsive web designs, improving layout flexibility and enhancing creativity in styling.Supported BrowsersGoogle Chrome 5.0Edge 12Mozilla 4.0Safari 5.0Opera 11.1 Comment More infoAdvertise with us V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies CSS CSS-Selectors Similar Reads CSS [attribute*=value] Selector The [attribute*="str"] selector targets the elements whose attribute values contain a specified substring. This substring can appear anywhere within the attribute's value — beginning, end, or middle.Syntax:element [attribute*="str"] { // CSS Property} Example: In the following example, the <p> 2 min read CSS [attribute=value] Selector The [attribute=value] selector in CSS is used to select those elements whose attribute value is equal to "value".Syntax: element [attribute = "value"] { // CSS Property}Note: <!DOCTYPE> must be declared for IE8 and earlier versions.Example 1: In this example, The selector h1[id="geeks"] target 2 min read CSS [attribute$=value] Selector The [attribute$=â€valueâ€] selector is used to select those elements whose attribute value ends with a specified value "value". The value need not to be present as separate word. It may be a part of another word or expression but it needs to be present at the end. Syntax:[attribute$="value"] { // CSS 2 min read CSS [attribute|=value] Selector The [attribute|=value] selector is used to select those elements whose attribute value is equal to "value" or whose attribute value started with "value" immediately followed by a hyphen (-).Note: Use <!DOCTYPE> to run [attribute|=value] selector in IE8 or earlier versions.Syntax:[attributeType 2 min read CSS [attribute~=value] Selector The [attribute~="value"] selector is used to select those elements whose attribute value contains a specified word. The "value" must be present in the attribute as a separate word and not as part of the other word i.e. if [title~=Geeks] is specified then all elements with Geeks title get selected.Sy 2 min read CSS [attribute^=value] Selector The [attribute^=value] selector selects elements whose attribute value begins with a given attribute.Syntax:[attribute^=value] { // CSS Property}Example: In this example, The CSS selector p[class^="for"] targets <p> elements with a class attribute that starts with "for" and applies a green bac 2 min read CSS #id Selector The ID selector in CSS is used to select a single element on a page by referencing its id attribute. This attribute must be unique within a page, meaning no two elements can have the same id. The ID selector is prefixed with a hash (#) symbol in CSS.Basic ID SelectorThe ID selector allows you to sty 7 min read CSS * (Universal) Selector The universal selector (*) applies styles to all elements on a page or within a specified context, regardless of their type, class, or ID. It's commonly used for global resets or universal styling. * { /* styles */}1. Basic Use case of universal selectorThe universal selector applies styles to all e 4 min read CSS :active Selector The: active selector is used in styling an active link of the web page. Style display when the user clicks on the link. This selector is different from :link, :visited and: hover selectors. The main use of : active selector is on the links but it can be used on all elements.Syntax: :active{ //CSS pr 2 min read CSS ::after Selector ::after selector is used to add the same content multiple times after the content of other elements. This selector is the same as ::before selector. Syntax:::after{ content:}Below HTMl/CSS code shows the functionality of ::after selector : HTML <!DOCTYPE html> <html> <head> <sty 2 min read Like