28112 sujets

CSS et mise en forme, CSS3

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

Bonjour,

Je me suis demandé si c'est possible d'utiliser ceci en scss 


@if (parent : nth-child == 9) {

   color: red;
}


Dans le sens , si j'ai 9 et que 9 enfants ... je mets tout le texte en rouge ..
Modifié par pacsys (16 May 2019 - 10:20)
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ù ?
Modifié par JENCAL (14 May 2019 - 15:14)
Modérateur
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.
_laurent a écrit :
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 ?


C'est bien ca !
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 Smiley smile le css il connait rien de ton html )
Modérateur
JENCAL a écrit :
Oui, mais là tu sais que tu cible "9" élément Smiley smile
le truc c'est "comment rendre dynamique ce 9"


Heu je vois pas trop ce que ça veut dire le rendre dynamique Smiley sweatdrop
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à...
_laurent a écrit :


Heu je vois pas trop ce que ça veut dire le rendre dynamique Smiley sweatdrop
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)
Qu'on soit bien clair. Cette spécificité est liée qu'a un tableau possédant 9 colonnes
Modifié par pacsys (14 May 2019 - 15:47)
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é Smiley ola
Sujet clos
Aller à