XPost: comp.lang.javascript
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.
--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)