Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #40348 > unrolled thread

CSS Selector Discussion

Back to article view | Back to comp.lang.javascript

Contents

  CSS Selector Discussion Gaurav Kumar Arya <gauravmka24@gmail.com> - 2021-08-18 10:49 -0700
    Re: CSS Selector Discussion Ben Bacarisse <ben.usenet@bsb.me.uk> - 2021-08-19 00:02 +0100

#40348 — CSS Selector Discussion

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 

[toc] | [next] | [standalone]

#40349

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.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web