RetroBBS - comp.lang.javascript - Re: CSS Selector Discussion

CSS Selector Discussion

<adb8ff95-c5f9-4caa-b5b4-d4efd3abb208n@googlegroups.com>

https://www.rocksolidbbs.com/devel/article-flat.php?id=17229&group=comp.lang.javascript#17229

copy link Newsgroups: comp.lang.javascript

X-Received: by 2002:a05:622a:1910:: with SMTP id w16mr8685507qtc.227.1629308994791;
Wed, 18 Aug 2021 10:49:54 -0700 (PDT)
X-Received: by 2002:a05:6830:2695:: with SMTP id l21mr8287153otu.138.1629308994370;
Wed, 18 Aug 2021 10:49:54 -0700 (PDT)
Path: i2pn2.org!i2pn.org!aioe.org!news.mixmin.net!proxad.net!feeder1-2.proxad.net!209.85.160.216.MISMATCH!news-out.google.com!nntp.google.com!postnews.google.com!google-groups.googlegroups.com!not-for-mail
Newsgroups: comp.lang.javascript
Date: Wed, 18 Aug 2021 10:49:54 -0700 (PDT)
Injection-Info: google-groups.googlegroups.com; posting-host=150.242.172.131; posting-account=zDZEUwoAAAAnAImBaaz1tA0FnTrdhA1S
NNTP-Posting-Host: 150.242.172.131
User-Agent: G2/1.0
MIME-Version: 1.0
Message-ID: <adb8ff95-c5f9-4caa-b5b4-d4efd3abb208n@googlegroups.com>
Subject: CSS Selector Discussion
From: gauravmka24@gmail.com (Gaurav Kumar Arya)
Injection-Date: Wed, 18 Aug 2021 17:49:54 +0000
Content-Type: text/plain; charset="UTF-8"

by: Gaurav Kumar Arya - Wed, 18 Aug 2021 17:49 UTC

Hello Sir/Madam

Please help in explaining this concept of combination of css selector of creating Chess board layout using grid layout.

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.

Advance Thank you to the one who will clear my doubt.

Thanks
Gaurav kumar Arya

Re: CSS Selector Discussion

<87czqas6ey.fsf@bsb.me.uk>

copy mid

https://www.rocksolidbbs.com/devel/article-flat.php?id=17230&group=comp.lang.javascript#17230

copy link Newsgroups: comp.lang.javascript comp.infosystems.www.authoring.stylesheets
Followup: comp.infosystems.www.authoring.stylesheets

Path: i2pn2.org!i2pn.org!eternal-september.org!reader02.eternal-september.org!.POSTED!not-for-mail
From: ben.usenet@bsb.me.uk (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: <adb8ff95-c5f9-4caa-b5b4-d4efd3abb208n@googlegroups.com>
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

by: Ben Bacarisse - Wed, 18 Aug 2021 23:02 UTC

Gaurav Kumar Arya <gauravmka24@gmail.com> 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.

Every little picofarad has a nanohenry all its own. -- Don Vonada

devel / comp.lang.javascript / Re: CSS Selector Discussion

devel / comp.lang.javascript / Re: CSS Selector Discussion

Subject	Author
CSS Selector Discussion	Gaurav Kumar Arya
Re: CSS Selector Discussion	Ben Bacarisse