{"id":14944,"date":"2021-01-05T20:06:05","date_gmt":"2021-01-06T04:06:05","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14944"},"modified":"2023-12-01T04:06:31","modified_gmt":"2023-12-01T12:06:31","slug":"css-nth-child","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-nth-child\/","title":{"rendered":"CSS Nth Child: The Complete Guide"},"content":{"rendered":"\n<p><em>The CSS :nth-child() selector applies a style to elements at a specific position in a group. Often, the :nth-child() selector is used to style particular list items, such as every second or third item.<\/em><\/p>\n\n\n\n<p>When you\u2019re designing a website, you may want to apply a style to only a select set of elements in a container. For instance, you may only want to apply a style to every second element in a list, or every third row in a table.<\/p>\n\n\n\n<p>That\u2019s where the CSS :nth-child pseudo-class comes in. The :nth-child pseudo-class matches elements based on their position in a list of items on an HTML page.<\/p>\n\n\n\n<p>This tutorial will discuss, with reference to examples, the basics of pseudo-classes and how you can use the :nth-child pseudo-class. By the end of reading this tutorial, you\u2019ll be an expert at using the :nth-child pseudo-class to select elements on a web page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Pseudo-Classes<\/h2>\n\n\n\n<p>In CSS, selectors are used to select specific elements on a web page to which a style should be applied. For example, a selector could change the text color of all &lt;p&gt; elements on a web page to green.<\/p>\n\n\n\n<p>You may decide that you only want to apply a style to an element which exists in a specific state. Pseudo-classes allow you to apply styles only when an element is in a specific state.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS :nth-child Pseudo-Class<\/h2>\n\n\n\n<p>The :nth-child pseudo-class applies styles to elements in a group. You can apply styles to a specific element based on its position or multiple elements. A common :nth-child rule is to color every element at an odd or even position in the list.<\/p>\n\n\n\n<p>Here is the syntax of the :nth-child pseudo-class:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>li:nth-child(2) {\n\tcolor: lightblue;\n}<\/pre><\/div>\n\n\n\n<p>Let\u2019s break down this example:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>li<\/strong> refers to the element to which a style should be applied.<\/li><li><strong>nth-child<\/strong> is the selector used to match an element.<\/li><li><strong>2<\/strong> is the formula used to match an element using nth-child.<\/li><\/ul>\n\n\n\n<p>In this case, we applied our style to every second &lt;li&gt; element in a list.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">:nth-child Accepted Values<\/h3>\n\n\n\n<p>The :nth-child pseudo-class accepts two types of values. First, the pseudo-class accepts keyword values which are assigned default formulas. These keywords are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>odd: Selects elements whose position in a list is an odd number.<\/li><li>even: Selects elements whose position in a list is an even number.<\/li><\/ul>\n\n\n\n<p>Second, the :nth-child pseudo-class accepts a custom formula which specifies the elements the pseudo-class should select on a web page. Here are a few example formulas:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>:nth-child(6): Selects the sixth element in a list.<\/li><li>:nth-child(n+2): Selects the second element and all subsequent elements.<\/li><li>:nth-child(4n): Selects all elements that are a multiple of 4.<\/li><\/ul>\n\n\n\n<p><em>n<\/em> is equal to the position in which an item appears in a list.<\/p>\n\n\n\n<p>Now we know the basics of the :nth-child pseudo-class, we can explore a few examples of the pseudo-class in action.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS :nth-child Examples<\/h2>\n\n\n\n<p>Let\u2019s walk through two examples of the :nth-child pseudo-class.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">:nth-child Table<\/h3>\n\n\n\n<p>One common use of the :nth-child pseudo-class is to select rows in a table.<\/p>\n\n\n\n<p>Suppose we are designing a website for a local cookery club. The club has asked us to put together a table for their website with the recipe for their special <em>spiced hot chocolate<\/em>. The club wants every second row in the table to be highlighted in hot pink, which is the club\u2019s main color.<\/p>\n\n\n\n<p>We could create this table using the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n&lt;table&gt;\n  &lt;tr&gt;\n    &lt;th&gt;Ingredient&lt;\/th&gt;\n    &lt;th&gt;Quantity&lt;\/th&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Skimmed Milk&lt;\/td&gt;\n    &lt;td&gt;250 mls&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;75% Dark Chocolate&lt;\/td&gt;\n    &lt;td&gt;Two squares (10g)&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Cinnamon&lt;\/td&gt;\n    &lt;td&gt;A pinch&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Honey&lt;\/td&gt;\n    &lt;td&gt;1 tsp&lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;\/table&gt;\n\n&lt;style&gt;\n  tr:nth-child(even) {\n      background-color: hotpink;\n  }\n&lt;\/style&gt;<\/pre><\/div>\n\n\n\n<p><em>Click the\u00a0<\/em><img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>We defined a table with two columns and five rows (one of which is a header row). The first column stores the list of ingredients used to make the spiced hot chocolate. Our second column stores the quantities of each ingredient used.<\/p>\n\n\n\n<p>To learn more about how tables are created in HTML, read our <a href=\"https:\/\/careerkarma.com\/blog\/html-table\">guide to HTML tables<\/a>.<\/p>\n\n\n\n<p>In our CSS file, we used the :nth-child pseudo-class to apply a style to every even-numbered row in our table.<\/p>\n\n\n\n<p>The <em>tr<\/em> selector is used to select all table rows (denoted by the &lt;tr&gt; tag in HTML), and the :nth-child(even) pseudo-class selects every table row with an even ID number. For each even-numbered table row, the background color of the table row is set to hot pink.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">:nth-child List<\/h3>\n\n\n\n<p>Another common use of the :nth-child pseudo-class is to highlight items in a list.<\/p>\n\n\n\n<p>Suppose we have been asked to put together a list of the names of each member of the cooking club. The text for the first three names on the list should appear in light blue, because they hold titles in the club.<\/p>\n\n\n\n<p>We could create this list using the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n&lt;ul&gt;\n\t&lt;li&gt;Chad Bakersfield&lt;\/li&gt;\n\t&lt;li&gt;Laura Patel&lt;\/li&gt;\n\t&lt;li&gt;Eddie Mahoney&lt;\/li&gt;\n\t&lt;li&gt;Edna Jamieson&lt;\/li&gt;\n\t&lt;li&gt;Lesley Spencer&lt;\/li&gt;\n\t&lt;li&gt;James Moffat&lt;\/li&gt;\n\t&lt;li&gt;Olivia Lindsay&lt;\/li&gt;\n&lt;ul&gt;\n\n&lt;style&gt;\n  li:nth-child(-n+3) {\n      color: lightblue;\n  }\n&lt;\/style&gt;<\/pre><\/div>\n\n\n\n<p><em>Click the\u00a0<\/em><img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>We used a &lt;ul&gt; tag to define an unordered list of items. Then, we used &lt;li&gt; tags to add seven names to the list, with each &lt;li&gt; tag containing a name.<\/p>\n\n\n\n<p>In our CSS code, we used the :nth-child selector to select the first three &lt;li> tags in our list. Specifically, we used the formula <em>-n+3<\/em>, which allows us to select the first three names. Then, the color of the text for the selected &lt;li> elements was changed to light blue.<\/p>\n\n\n\n<p>If you want to learn more about lists, check out our <a href=\"https:\/\/careerkarma.com\/blog\/html-lists\/\">HTML lists guide<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The :nth-child selector allows you to select elements based on their position in a group to which you can apply CSS styles.<\/p>\n\n\n\n<p>This tutorial discussed, with reference to two examples, the basics of CSS pseudo-classes, and how to use the :nth-child pseudo-class. Now you\u2019re equipped with the knowledge you need to start using the :nth-child pseudo-class like a professional web developer!<\/p>\n\n\n\n<p>Are you interested in learning more about CSS? Check out our <a href=\"https:\/\/careerkarma.com\/blog\/learn-css\/\">How to Learn CSS guide<\/a>. You&#8217;ll find top learning tips and guidance on where to find the best CSS learning resources and courses.<\/p>\n","protected":false},"excerpt":{"rendered":"The CSS :nth-child() selector applies a style to elements at a specific position in a group. Often, the :nth-child() selector is used to style particular list items, such as every second or third item. When you\u2019re designing a website, you may want to apply a style to only a select set of elements in a&hellip;","protected":false},"author":240,"featured_media":14945,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14944","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Nth Child: The Complete Guide: The Complete Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"The CSS :nth-child pseudo-class allows you to select elements based on their position in a container. On Career Karma, learn how to use the :nth-child pseudo-class.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-nth-child\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Nth Child: The Complete Guide\" \/>\n<meta property=\"og:description\" content=\"The CSS :nth-child pseudo-class allows you to select elements based on their position in a container. On Career Karma, learn how to use the :nth-child pseudo-class.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-nth-child\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-06T04:06:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T12:06:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/nate-grant-QQ9LainS6tI-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"574\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-nth-child\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-nth-child\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Nth Child: The Complete Guide\",\"datePublished\":\"2021-01-06T04:06:05+00:00\",\"dateModified\":\"2023-12-01T12:06:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-nth-child\/\"},\"wordCount\":1004,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-nth-child\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/nate-grant-QQ9LainS6tI-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-nth-child\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-nth-child\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-nth-child\/\",\"name\":\"CSS Nth Child: The Complete Guide: The Complete Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-nth-child\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-nth-child\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/nate-grant-QQ9LainS6tI-unsplash.jpg\",\"datePublished\":\"2021-01-06T04:06:05+00:00\",\"dateModified\":\"2023-12-01T12:06:31+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The CSS :nth-child pseudo-class allows you to select elements based on their position in a container. On Career Karma, learn how to use the :nth-child pseudo-class.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-nth-child\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-nth-child\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-nth-child\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/nate-grant-QQ9LainS6tI-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/nate-grant-QQ9LainS6tI-unsplash.jpg\",\"width\":1020,\"height\":574},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-nth-child\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Nth Child: The Complete Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Nth Child: The Complete Guide: The Complete Guide | Career Karma","description":"The CSS :nth-child pseudo-class allows you to select elements based on their position in a container. On Career Karma, learn how to use the :nth-child pseudo-class.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/css-nth-child\/","og_locale":"en_US","og_type":"article","og_title":"CSS Nth Child: The Complete Guide","og_description":"The CSS :nth-child pseudo-class allows you to select elements based on their position in a container. On Career Karma, learn how to use the :nth-child pseudo-class.","og_url":"https:\/\/careerkarma.com\/blog\/css-nth-child\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2021-01-06T04:06:05+00:00","article_modified_time":"2023-12-01T12:06:31+00:00","og_image":[{"width":1020,"height":574,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/nate-grant-QQ9LainS6tI-unsplash.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-nth-child\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-nth-child\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Nth Child: The Complete Guide","datePublished":"2021-01-06T04:06:05+00:00","dateModified":"2023-12-01T12:06:31+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-nth-child\/"},"wordCount":1004,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-nth-child\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/nate-grant-QQ9LainS6tI-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-nth-child\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-nth-child\/","url":"https:\/\/careerkarma.com\/blog\/css-nth-child\/","name":"CSS Nth Child: The Complete Guide: The Complete Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-nth-child\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-nth-child\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/nate-grant-QQ9LainS6tI-unsplash.jpg","datePublished":"2021-01-06T04:06:05+00:00","dateModified":"2023-12-01T12:06:31+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The CSS :nth-child pseudo-class allows you to select elements based on their position in a container. On Career Karma, learn how to use the :nth-child pseudo-class.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-nth-child\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-nth-child\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-nth-child\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/nate-grant-QQ9LainS6tI-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/nate-grant-QQ9LainS6tI-unsplash.jpg","width":1020,"height":574},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-nth-child\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Nth Child: The Complete Guide"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14944"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14944\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14945"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}