Big Matrix child CSS syntax

Community Usage questions
1

How to make this shorter ?

props.css = $ === 0 ? @{Monde_0} === 0 || undefined ? 
'class: Dossier_fermé;h1{font-size:140%;background:rgba(178,118,46,.4);margin-left:60px;height:60px;line-height:60px;}' : 
'class: Dossier_ouvert;h1{font-size:140%;background:rgba(178,118,46,.6);margin-left:60px;height:60px;line-height:60px;}' : 
$ == 1 ? 'font-size:160%;background : grey;' : 
$ == 116 ? 'font-size:160%;background : grey;' :
$ == 123  ? 'font-size:160%;background : grey;' :
$ == 149 ? 'font-size:160%;background : grey;' :
$ == 152 ? 'font-size:160%;background : grey;' :
$ == 167 ? 'font-size:160%;background : grey;' :
$ == 231 ? 'font-size:160%;background : grey;' :
$ == 249 ? 'font-size:160%;background : grey;' :
$ == 270 ? 'font-size:160%;background : grey;' :
$ == 284 ? 'font-size:160%;background : grey;' :
'background : blue'

i suppose i may be inspired by something like this

var index = [1,116,123,149,152,167,231,249,270,284]
for(var i = 0 ; i < index.length ; i++ ) if ( $ = index[i]) ...

But that wont suits the props.css here...

So...

EDIT : getting closer with :

for(var i = 0 ; i < INDEX.length ; i++)
{
  props.css = $ == INDEX[i] ? 'font-size:160%;background : grey;' : 'background : blue'
}
2

You could simply put that css in the matrix' css and use :first-child or :nth-child pseudo selector to target the widgets you want.

4

Ok, so i went back to the css field... and don't understand what i get : All widgets are affected... just a bit more for the expected ones...

JS{{
var INDEX = [1,16,23,49,72]         
var css = ''
for (var i = 0; i < INDEX.length; i++)                                  
  {css += ":nth-child(" + (INDEX[i]) + "){color:red ; font-size:180%;}"}         
return css
}}

grid

JS{{
var INDEX = [1,16,23,49,72]         
var css = ''
for (var i = 0; i < INDEX.length; i++)                                  
  {css += ":nth-child(" + (INDEX[i]) + "){margin-left:12px}"}         
return css
}}

image

Don't i need to put something before :nth-child ? I tried item, but that's not ok...

5

Don't i need to put something before :nth-child ? I tried item, but that's not ok...

Yes yo do otherwise the selector is too vague (targetting any element that's first child of its parent), but you need to use the browser inspector (F12) to see what classes a given to the element you're targetting, in this case this would do

.widget:nth-child

Sometimes less is more, that JS block doesn't help much here:

.widget:first-child,
.widget:nth-child(16),
.widget:nth-child(23),
.widget:nth-child(49),
.widget:nth-child(72) {
  /* all styles at once) */
}
6

Thank you !

Could you please make a screenshot of where i have to look in the browser to see classes ?... I had a look, but can't find where it is...

7

Peek 21-02-2022 09-10

8

Ok, thank you !

Oh, btw... with all this, we've just killed the 'stay on top' hack you gave me yesterday... life's so hard, for the first child :crazy_face: