Re: CSS Selector Discussion

Path	csiph.com!news.mixmin.net!eternal-september.org!reader02.eternal-september.org!.POSTED!not-for-mail
From	Ben Bacarisse <ben.usenet@bsb.me.uk>
Newsgroups	comp.lang.javascript, comp.infosystems.www.authoring.stylesheets
Subject	Re: CSS Selector Discussion
Followup-To	comp.infosystems.www.authoring.stylesheets
Date	Thu, 19 Aug 2021 00:02:29 +0100
Organization	A noiseless patient Spider
Lines	50
Message-ID	<87czqas6ey.fsf@bsb.me.uk> (permalink)
References	<adb8ff95-c5f9-4caa-b5b4-d4efd3abb208n@googlegroups.com>
Mime-Version	1.0
Content-Type	text/plain
Injection-Info	reader02.eternal-september.org; posting-host="392fe0f5b5dd5175e6c48d474637b868"; logging-data="17206"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX18lKZhcXvOuOL+yacQ0vUDkXUQBaJIuTHY="
Cancel-Lock	sha1:i+mmD1huupin3z6/cRaOYb2p694= sha1:FutCz7/1hffrRBw+Zj0Gx8/rTjc=
X-BSB-Auth	1.dcc23d15e58373bcce8e.20210819000229BST.87czqas6ey.fsf@bsb.me.uk
Xref	csiph.com comp.lang.javascript:40349 comp.infosystems.www.authoring.stylesheets:8398

Cross-posted to 2 groups.

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

Show key headers only | 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