{"resource":{"author":{"id":"h2so9H8jPMmgUKGghoNl","name":"Yomesh Gupta","username":"yomeshgupta"},"content":{"link":null,"difficulty":1,"domain":2,"type":1,"isInternal":true,"body":"The `:nth-child()` CSS pseudo-class matches elements based on their position among a group of siblings i.e. let us say a div has five children where 3 are `p` tags and 2 are `span` tags. If we write the following HTML and CSS --\r\n\r\n```html\r\n
\r\n

One

\r\n Two\r\n

Three

\r\n

Four

\r\n Five\r\n
\r\n```\r\n\r\n```css\r\ndiv {\r\n background: black;\r\n color: white;\r\n}\r\n\r\ndiv p:nth-child(2n+1) {\r\n color: red;\r\n}\r\n```\r\n\r\nIt highlights `One` and `Three` only. \r\n\r\n![Output 1](https://ik.imagekit.io/devtoolstech/blog/nth-child/Screenshot_2023-02-17_at_11.55.38_PM_bguuSDkek.png?ik-sdk-version=javascript-1.4.3&updatedAt=1676659138066)\r\n\r\n## Now, why is that?\r\n\r\nFor this, you need to mainly understand the functional notation syntax of the `:nth-child` selector i.e. `:nth-child(An+B)`. Here\r\n\r\n- `A` is the step size\r\n- `B` is the offset\r\n- `n` is the non-negative integer, starting from `0`.\r\n\r\nIn our example, `:nth-child(2n+1)` where `A=2`, `B=1`, and `n can go from 0,1,2..` to `Infinity`.\r\n\r\n```\r\n:nth-child(2(0)+1) => :nth-child(0 + 1) => :nth-child(1)\r\n:nth-child(2(1)+1) => :nth-child(2 + 1) => :nth-child(3)\r\n:nth-child(2(2)+1) => :nth-child(4 + 1) => :nth-child(5)\r\n...\r\n```\r\n\r\n## Element Indexing\r\n\r\nIn our CS classes or our dev work, we are used to having 0-based indices. However, in the case of counting the elements, 1-based indexing is used i.e.\r\n\r\n```html\r\n
\r\n

One

// 1\r\n Two // 2\r\n

Three

// 3\r\n

Four

// 4\r\n Five // 5\r\n
\r\n```\r\n\r\n**The `n` starts from `0` but elements counting starts from `1`.** Hence, it matches element `One` and `Three`.\r\n\r\n## Why is Five not highlighted in red?\r\n\r\nFor `:nth-child` selector, the child count includes children of any element type; but it is considered a match only if the element at that child position is of the specified element type. Hence, even though `:nth-child(2n+1)` produces `5` when `n=2` and we have a fifth element, it is highlighted because it is of type `span`. Our condition to match the element must be at the right position and right type.\r\n\r\nIf we change the fifth element to type `p` then it would be highlighted.\r\n\r\n```html\r\n
\r\n

One

// 1\r\n Two // 2\r\n

Three

// 3\r\n

Four

// 4\r\n

Five

// 5\r\n
\r\n```\r\n\r\n![Output 2](https://ik.imagekit.io/devtoolstech/blog/nth-child/Screenshot_2023-02-17_at_11.55.52_PM_99EUwTpyA.png?ik-sdk-version=javascript-1.4.3&updatedAt=1676659220767)\r\n\r\n## Learn by examples\r\n","languages":["react"],"editorConfig":{"react":{"nodes":[{"nodeId":"4aad7d47-c5b9-4d0c-9b0c-c0a4340e87ec","nodeType":"file","nodeName":"App.js","nodeContent":"import styled from 'styled-components';\n\nconst Container = styled.div`\n &:hover {\n ul[data-key='${(props) => props.label}'] > ${(props) => props.label} {\n background-color: yellow;\n }\n\n p {\n display: block;\n }\n }\n`;\n\nconst items = [\n {\n id: 1,\n label: ':first-child',\n description: 'Highlighting the first child.',\n },\n {\n id: 2,\n label: ':last-child',\n description: 'Highlighting the last child.',\n },\n {\n id: 3,\n label: ':nth-child(2)',\n description: 'Highlighting the second child.',\n },\n {\n id: 4,\n label: ':nth-last-child(2)',\n description: 'Highlighting the second child from the last.',\n },\n {\n id: 5,\n label: ':nth-child(odd)',\n description:\n 'Highlighting the every odd child i.e. 1,3,5,7,9....and so on.',\n },\n {\n id: 6,\n label: ':nth-child(even)',\n description:\n 'Highlighting the every odd child i.e. 2,4,6,8,10....and so on.',\n },\n {\n id: 7,\n label: ':nth-child(n+4)',\n description:\n 'Highlighting the every child starting from 4 i.e. 4,5,6,7....and so on.',\n },\n {\n id: 8,\n label: ':nth-child(3n-1)',\n description:\n 'Highlighting the every matching the condition i.e. (3(1) - 1) = 2, (3(2) - 1) = 5',\n },\n {\n id: 9,\n label: ':nth-child(3n+1)',\n description:\n 'Highlighting the every matching the condition i.e. (3(0) + 1) = 1, (3(1) + 1) = 4, (3(2) + 1) = 7',\n },\n {\n id: 10,\n label: ':nth-child(4n)',\n description:\n 'Highlighting the every matching the condition i.e. (4(1)) = 4',\n },\n];\n\nexport default function App() {\n return (\n
\n {items.map((item) => {\n return (\n \n
\n {item.label}\n
    \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
\n
\n {item.description ?

{item.description}

: null}\n \n );\n })}\n
\n );\n}\n","nodeLanguage":"javascript"},{"nodeId":"f7578692-c62f-4c69-8c17-4876fd36eff1","nodeType":"file","nodeName":"index.js","nodeContent":"import { StrictMode } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport App from \"./App\";\nimport \"./style.css\"; \n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(\n \n \n ,\nrootElement\n);","nodeLanguage":"javascript"},{"nodeId":"3f480fbb-5d4a-4a3a-9e30-80af7d530e96","nodeType":"file","nodeName":"style.css","nodeContent":"* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n font-family: sans-serif;\n -webkit-font-smoothing: auto;\n -moz-font-smoothing: auto;\n -moz-osx-font-smoothing: grayscale;\n font-smoothing: auto;\n text-rendering: optimizeLegibility;\n font-smooth: always;\n -webkit-tap-highlight-color: transparent;\n -webkit-touch-callout: none;\n background: #2f3542;\n}\n\nmain {\n width: 80%;\n margin: 50px auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border: 1px solid #ecf0f1;\n transition: all 0.2s ease-in-out;\n color: white;\n}\n\n.content {\n width: 100%;\n padding: 10px;\n border-radius: 4px;\n transition: all 0.2s ease-in-out;\n cursor: pointer;\n}\n\n.content div {\n display: flex;\n justify-content: space-between;\n}\n\n.content div span {\n font-weight: 600;\n}\n\n.content p {\n padding: 10px 0px 0px 0px;\n color: #ebebeb;\n font-size: 14px;\n display: none;\n}\n\n.content ul {\n display: flex;\n justify-content: space-between;\n gap: 20px;\n}\n\n.content ul li {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: rgba(255, 255, 255, 0.7);\n list-style: none;\n}\n\n.content:hover {\n background-color: #000000;\n}\n","nodeLanguage":"css"},{"nodeId":"93f9d0ad-b85e-483e-91cb-0b8d4c8353c4","nodeType":"file","nodeName":"index.html","nodeContent":"\n\n \n \n \n Document\n \n \n
\n \n","nodeLanguage":"html"}],"dependencies":{"react":"17.0.2","react-dom":"17.0.2","react-scripts":"4.0.0","styled-components":"5.3.6"},"openPaths":["/App.js","/index.js","/index.html","/style.css"],"entry":"App.js","activePath":"/style.css"}}},"stats":{"views":15555,"used":0,"likes":0},"description":"","published":true,"isActive":true,"tags":["javascript","frontend","code","programming","ui","ux","interactive examples","codedamn","nth-child selectors","pseudo selectors","css selectors","sass","scss","less","styling","html","css fundamentals","frontend fundamentals","examples","codesandbox"],"slug":"understanding-nth-child-selectors-in-css---rid---ZD7WRQQ8iSNv8SCSZdTG","isPremium":false,"categories":[],"requires":[],"_id":"63f077e9412456738aaee88c","title":"Understanding Nth-Child Selectors in CSS","resourceId":"ZD7WRQQ8iSNv8SCSZdTG","createdAt":1676703721912,"modifiedAt":1676704374212},"currentUser":null,"isOwner":false,"recommendations":{"questions":[{"_id":"636d3c2f20622762d08d016e","content":{"languages":["javascript"],"difficulty":1},"tags":["javascript","frontend","coding","devtools tech","interview questions","interview preparation","mcq","programming paradigm","tooling","mdn","js paradigm","programming questions","switch case","comparison"],"slug":"how-the-comparison-happens-with-switch-cases-in-javascript---qid---Dq9nqwLRz1czCqtsFrm0","title":"How the comparison happens with switch cases in JavaScript?","questionId":"Dq9nqwLRz1czCqtsFrm0"},{"_id":"5eca301cbe633f3afec7c68f","content":{"languages":["javascript"],"difficulty":2},"tags":["node.js","javascript","promises","frontend","frontend fundamentals","js fundamentals","interview questions"],"slug":"what-would-be-the-output-of-the-following-code-snippet-or-promise-based-output-question-or-part-two---qid---mxk2aiuSwTNwpApt1L4c","title":"What would be the output of the following code snippet? | Promise Based Output Question | Part Two","questionId":"mxk2aiuSwTNwpApt1L4c"},{"_id":"673f3c88d34d7f4b8ccfbfaf","content":{"languages":["javascript","typescript"],"difficulty":2},"tags":["javascript","frontend","html","css","ui","ux","virtual dom","dom elements","trees","rendering","ui rendering","dom tree"],"slug":"build-a-virtual-dom-to-actual-html-dom-convertor-or-dom-renderer---qid---bAin2TEn862JTFVFgxEi","title":"Build a Virtual DOM to actual HTML DOM Convertor | DOM Renderer","questionId":"bAin2TEn862JTFVFgxEi"},{"_id":"62d11efed3473370ac371cfe","content":{"languages":["react","html"],"difficulty":4},"tags":["javascript","react","frontend coding challenge","ui","ux","machine coding round","codedamn","egghead","frontend masters","devtools tech","youtube","coding problem","ui problem"],"slug":"build-user-avatar-screen-or-frontend-coding-challenge-or-javascript-interview-question-or-machine-coding-round---qid---VyWQo0TX9OLVB7Dxm173","title":"Build User Avatar Screen | Frontend Coding Challenge | JavaScript Interview Question | Machine Coding Round","questionId":"VyWQo0TX9OLVB7Dxm173"},{"_id":"60ce47a8e541233080dcd5c5","content":{"languages":["react"],"difficulty":4},"tags":["javascript","react","react hooks","frontend","javascript fundamentals","interview questions","frontend fundamentals"],"slug":"how-to-build-a-custom-timer-hook-in-react-js-or-usetimer-or-javascript-interview-question---qid---H5KlkIeowa1LrIn1mSN5","title":"How to build a custom timer hook in React.js? | useTimer | JavaScript Interview Question","questionId":"H5KlkIeowa1LrIn1mSN5"}],"resources":[{"_id":"652d64e4d5ab2876a4ca213c","content":{"difficulty":4,"domain":2,"type":1,"isInternal":false,"languages":["undefined"]},"tags":["frontend","coding","interviews","experience","devtools tech","blog","medium"],"slug":"zeta-interview-experience-sde-1-frontend---rid---2RwNAPVBDsL25iOQe1l0","title":"Zeta Interview Experience SDE-1 FrontEnd","resourceId":"2RwNAPVBDsL25iOQe1l0"},{"_id":"5f2856d6cbec5f7ffc0c2fc4","content":{"difficulty":1,"domain":2,"type":1},"tags":["closure","javascript","es6","nodejs","functions","frontend","js fundamentals"],"slug":"closure-and-this-how-are-variables-resolved-within-a-function---rid---UhIPcUg39ApeirvSiv4a","title":"Closure and this - How are variables resolved within a function?","resourceId":"UhIPcUg39ApeirvSiv4a"},{"_id":"69970bdb58fa65a0ece72546","content":{"difficulty":2,"domain":2,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","ui","ux","devtools tech","coding","frontend","ui","ux"],"slug":"what-is-the-significance-of-the-react-fiber-architecture---rid---2tPtREBBpVUslyJcRGrw","title":"What is the significance of the React Fiber architecture?","resourceId":"2tPtREBBpVUslyJcRGrw"},{"_id":"5f266204cbec5f7ffc0c2fc2","content":{"difficulty":1,"domain":2,"type":1},"tags":["javascript","es6","js fundamentals","arrow functions","tania rascia","devtools"],"slug":"understanding-arrow-functions-in-javascript---rid---RZqVVZQ1dO8GwrecJbft","title":"Understanding Arrow Functions in JavaScript","resourceId":"RZqVVZQ1dO8GwrecJbft"},{"_id":"5fc7215a6d3cda64e470c415","content":{"difficulty":4,"domain":1,"type":5},"tags":["linkedin","jobs","skills","career","indemand","devtools"],"slug":"move-close-to-your-dream-job-find-out-top-skills-in-the-market---rid---layhD7GHUKsulhIM25yM","title":"Move close to your dream job. Find out top skills in the market.","resourceId":"layhD7GHUKsulhIM25yM"}]}}