Path: csiph.com!news.mixmin.net!eternal-september.org!reader02.eternal-september.org!.POSTED!not-for-mail From: Ben Bacarisse Newsgroups: comp.lang.javascript,comp.infosystems.www.authoring.stylesheets Subject: Re: CSS Selector Discussion Followup-To: comp.infosystems.www.authoring.stylesheets Date: Thu, 19 Aug 2021 00:02:29 +0100 Organization: A noiseless patient Spider Lines: 50 Message-ID: <87czqas6ey.fsf@bsb.me.uk> References: Mime-Version: 1.0 Content-Type: text/plain Injection-Info: reader02.eternal-september.org; posting-host="392fe0f5b5dd5175e6c48d474637b868"; logging-data="17206"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX18lKZhcXvOuOL+yacQ0vUDkXUQBaJIuTHY=" Cancel-Lock: sha1:i+mmD1huupin3z6/cRaOYb2p694= sha1:FutCz7/1hffrRBw+Zj0Gx8/rTjc= X-BSB-Auth: 1.dcc23d15e58373bcce8e.20210819000229BST.87czqas6ey.fsf@bsb.me.uk Xref: csiph.com comp.lang.javascript:40349 comp.infosystems.www.authoring.stylesheets:8398 Gaurav Kumar Arya writes: > Please help in explaining this concept of combination of css selector > of creating Chess board layout using grid layout. This is not on-topic here. There is a group comp.infosystems.www.authoring.stylesheets for this, but it does not get much traffic. However, I've cross-posted my reply there and set a followup-to header because this is exactly the sort of post that can bring a flagging group because to life. > Here is the code > https://codepen.io/jeansarlon/pen/WpZNda > > I am not able to understand the whole css selector code expecially > .box:nth-child(9) ~ div:nth-child(-2n+16), , here we are taking > box:nth child and div:nth-child, what is the difference between this > two both are div just only class mention. > > Please explain in detail. First, the div/box thing makes no difference in this case; it's just how they chose to write it. All the matching divs have class box, and all the matching elements with class box are divs. Second, the ~ connector joins two selectors and matches those elements selected by the second that are siblings following an element matched by the first. See https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator .box:nth-child(9) matches an element with class box that is the 9th child of some other box. div:nth-child(-2n+16) matches those divs that are children numbered -2*0+16, -2*1+16, -2*2+16, -2*3+16, ..., -2*7+16 i.e. children numbered 16, 14, 12, 10, 8, 6, 4, and 2. See https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child Where did you go to try to find out? You need to have a better source the asking in Usenet. If you don't know about it, MDN (to which I linked) is a good source of information. -- Ben.