[Résolu] Condition if --> Nth:child ?

Salut,

En SASS avec ce que tu as écrit je ne pense pas, mais en CSS oui : https://jsfiddle.net/undless/ehxy7o82/1/

li:last-child:nth-child(9) {
  background: red;
}

[EDIT]
Ah je crois que j'ai mal compris tu veux mettre tout les enfant en rouge seulement si il sont 9 au total c'est ca ?
[EDIT]
Modifié par _laurent (14 May 2019 - 15:20)

à la limite :

$var: 9;

@mixin test($p: null) {
    @if ($p) {
       background-color:red;
    } @else {
    }
}

test1 {
  @include test();
}
test5 {
  @include test();
}
test9 {
  @include test($var);
}

et en sortie CSS tu auras :

test1 {
}

test5 {
}

test9 {
  background-color: red;
}

Tu peux coupler avec nth-child...

JENCAL a écrit :
Salut

J'ai pas compris ta demande.....

nth-child(9) si tu veux cibler le 9eme... pourquoi faire une "condition" et surtout, par rapport à quoi en faite ? quel est le paramètre d'entrée ? ce 9 il sort d'où ?

En gros,
J'ai mon système de tableau générique qui se gère tout seul avec les grids ( Que ce soit un tableau de 3 ou 40 entrées). Mais j'ai un tableau spécifique contenant 9 colonnes avec des règles css spécifique pour chaque colonnes mais qui utilise la base css de mon générateur de tableau.

Je me suis dit pour ne pas tout peter, c'est pas grave, dés que je sais que le parent contient 9 et juste 9 enfants. Je peux lancer mes différentes règles css.

Impossible d'utiliser du jquery ?

pacsys a écrit :
Je veux juste éviter d'utiliser du JS pour ça si c’est pas nécessaire .

bah... en scss tu ne peux pas "compter" le nombre d’élément hein le css il connait rien de ton html )

_laurent a écrit :
J'adore ce genre de question CSS hahaha

li:first-child:nth-last-child(9),
li:first-child:nth-last-child(9) ~ li {
  background: red;
}

https://jsfiddle.net/undless/ehxy7o82/

Oui, mais là tu sais que tu cible "9" élément
le truc c'est "comment rendre dynamique ce 9"

_laurent a écrit :


Heu je vois pas trop ce que ça veut dire le rendre dynamique
La il veut juste cibler ceux qui on 9 enfants, donc c'est un nombre fixe. Si il veut 12 ou 7 il suffit de changer le 9 mais je ne vois pas la notion de dynamisme là...

alors question simple pour bien comprendre le coté dynamique.

Si je dois personnalisé 1000 listes avec un nombre d'enfants différents à chaque fois, je fais comment ? j (je suis pas une brut scss, donc boucle et cie je connais pas trop trop).
Modifié par JENCAL (14 May 2019 - 15:46)

ah ok !

Tu n'a pas du tout besoin de rendre ce "9" dynamique.

J'ai cru que tu voulais appliquer une règles css pour des élements qui ont X enfant dont X étant un paramètre dynamique.

Je me suis emporté