28172 sujets

CSS et mise en forme, CSS3

Associer un terme et plusieurs définitions dans une même couleur

Bonjour à tous,
Nous établissons les définitions d’une liste de termes. Il peut arriver qu’un terme puisse avoir plusieurs définitions selon le contexte. La charte graphique impose d’utiliser une alternance de couleurs de fond entre chaque ensemble « Terme et ses définitions ».
J’arrive au résultat désiré sans passer par des classes (c’est impératif) avec « is: » et les pseudos-classe « : nth-of-type », mais c’est lourd, car chaque définition après le terme amène deux règles.
Pourriez-vous m’aider à réaliser cette fonctionnalité indépendamment du nombre de définitions <dd>associées à <dt> ? Votre expertise serait grandement appréciée.
Modifié par Pyanepsion (22 Apr 2023 - 21:43)
La solution que j'utilise pour l'instant est plutôt fastidieuse.
Avez-vous une autre solution ?

dd:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1rem;
  width: 1rem;
  background-color: inherit;
}

/* Terme sans définition */
dt:nth-of-type(2n+1) {
  background-color: rgba(var(--bleu-rvb), 1);
}
dt:nth-of-type(2n) {
  background-color: rgba(var(--rouge-rvb), 1);
}

/* Un seule définition après un terme */
dt:nth-of-type(2n+1) + :is(dd) {
  background-color: rgba(var(--bleu-rvb), 1);
  margin-left: 1rem;
  position: relative;
}
dt:nth-of-type(2n) + :is(dd) {
  background-color: rgba(var(--rouge-rvb), 1);
  margin-left: 1rem;
  position: relative;
}

/* Deux définitions après un terme */
dt:nth-of-type(2n+1) + :is(dd) + :is(dd) {
  background-color: rgba(var(--bleu-rvb), 1);
  margin-left: 1rem;
  position: relative;
}
dt:nth-of-type(2n) + :is(dd) + :is(dd) {
  background-color: rgba(var(--rouge-rvb), 1);
  margin-left: 1rem;
  position: relative;
}

/* Trois définitions après un terme */
dt:nth-of-type(2n+1) + :is(dd) + :is(dd) + :is(dd) {
  background-color: rgba(var(--bleu-rvb), 1);
  margin-left: 1rem;
  position: relative;
}
dt:nth-of-type(2n) + :is(dd) + :is(dd) + :is(dd) {
  background-color: rgba(var(--rouge-rvb), 1);
  margin-left: 1rem;
  position: relative;
}

/* Et cetera */

Modifié par Pyanepsion (23 Apr 2023 - 20:17)
Modérateur
Bonjour,

1) Il me semble difficile de comprendre la question vu que dans l'exemple donné tous les éléments ont la même couleur de fond, ça ne nous avance pas beaucoup. C'est quoi qui doit avoir quelle couleur de fond ?

2) Il me semble que :is() n'a d'intérêt que si on y met plusieurs sélecteurs en paramètre. S'il n'y a qu'un sélecteur de concerné, on met juste ce sélecteur dans le css sans avoir besoin de l'entourer pas un :is().

3) margin-left: 1rem; et position: relative; pourraient n'être écrits qu'une seule fois dans une règle à part du genre de
dd {
  margin-left: 1rem;
  position: relative;
}
ce qui simplifie pas mal le css.

Amicalement,
Modifié par parsimonhi (23 Apr 2023 - 17:04)
Modérateur
Bonjour,

Je ferais comme ça :
:root {
	--pair-rvb: 204,204,204;
	--impair-rvb: 151,151,151;
}
dt:nth-of-type(2n+1),
dt:nth-of-type(2n+1) + dd,
dt:nth-of-type(2n+1) + dd + dd,
dt:nth-of-type(2n+1) + dd + dd + dd {
  background-color: rgba(var(--impair-rvb),1);
}
dt:nth-of-type(2n),
dt:nth-of-type(2n) + dd,
dt:nth-of-type(2n) + dd + dd,
dt:nth-of-type(2n) + dd + dd + dd {
  background-color: rgba(var(--pair-rvb),1);
}
dd {
  margin-left: 1rem;
  position: relative;
}

Pour l'instant, je ne vois pas comment se passer des énumérations dd, dd+dd, dd+dd+dd, etc.

Amicalement,
Meilleure solution
Bonjour, Parsimonhi,
J'ai remis la couleur que j'avais fini par ôter.
Merci pour votre réponse et vos conseils. Je comprends que la meilleure approche consiste, comme vous le préconisez, à adapter le CSS au fur et à mesure. Je vais donc envisager d’intégrer une routine supplémentaire dans la fonctionnalité d’ajout des nouvelles définitions à la liste, afin de rester le plus sobre possible conformément à votre suggestion.
Je vous remercie pour votre aide, et n’hésitez pas si vous avez d’autres conseils à partager.
Amicalement,
Pyanepsion
Modifié par Pyanepsion (24 Apr 2023 - 08:10)
Modérateur
Pyanepsion a écrit :
Bonjour à tous,
Nous établissons les définitions d’une liste de termes. Il peut arriver qu’un terme puisse avoir plusieurs définitions selon le contexte. La charte graphique impose d’utiliser une alternance de couleurs de fond entre chaque ensemble « Terme et ses définitions ».
J’arrive au résultat désiré sans passer par des classes (c’est impératif) avec « is: » et les pseudos-classe « : nth-of-type », mais c’est lourd, car chaque définition après le terme amène deux règles.
Pourriez-vous m’aider à réaliser cette fonctionnalité indépendamment du nombre de définitions &lt;dd&gt;associées à &lt;dt&gt; ? Votre expertise serait grandement appréciée.

Bonjour et par curiosité , ainsi que pour éventuellement compléter la reponse/piste de parsimonhi , esr ce que vos liste dt/dt sont en HTML ou bien sont-elle generé à la demande coté serveur ?

Dans le cas où elles sont généré à la demande (données extraites d'une BD ou fichier json,csv,etc..) il est aussi possible de compter celle-ci (modulo?) et d'ajouter un attribut style au dd en le générant avec la valeur CSS var() qui va bien: <dd style="--ddBg:red;"> . En usant d'une seule variable , --ddBg:X; dans la feuille de style, l'attribut style mettant cette valeur à jour suffira à ce que chaque dd affiche la valeur qui lui est attribuée. La feuille de style se réduit à dd{background:var(--ddBg);} et cette valeur est mise à jour par chaque dd injecter par le script serveur. Via javascript , l'idée est similaire, compter et injecter une custom propertie
// définir une variable dans un style en ligne
element.style.setProperty("--ma-variable","maCouleur");

Cdt
Modifié par gcyrillus (24 Apr 2023 - 22:00)
Prévenir un modérateur
Répondre au sujet
Aller à