Re: CSS Selector Discussion

[Ben Bacarisse]

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.