CSS Selector Discussion

21 views
Skip to first unread message

Gaurav Kumar Arya

unread,
Aug 18, 2021, 1:49:59 PMAug 18
to
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

Ben Bacarisse

unread,
Aug 18, 2021, 7:02:38 PMAug 18
to
Gaurav Kumar Arya <gaura...@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.
Reply all
Reply to author
Forward
0 new messages