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

Groups > comp.lang.javascript > #40349

Re: CSS Selector Discussion

Cross-posted to 2 groups.

Followups directed to: comp.infosystems.www.authoring.stylesheets

Show all headers | View raw

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.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

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

csiph-web