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