Je voudrais qu'un TR sur 2 ait une couleur différente.
Mon CSS
:root
{--SubTabBkgnd: #dbe7ef;}
tr.sub:nth-of-type(1) {background: blue;}
tr.sub:nth-of-type(2) {background: green;}
Mon HTML
<tr class="sub">

Ce que j'obtiens

Toutes leslignes ont la même couleur TabBkgnd = #dbe7ef

6 réponses


Pitet
Réponse acceptée

Avec :nth-child() et pas nth-of-type() ;)
https://jsfiddle.net/y17xLqn2/

Essaye d'utiliser :nth-child() avec la valeur even ou odd :

.sub:nth-child(even) {
  background-color: blue;
}
Hervé
Auteur

J'ai essayé et aussi de mettre background-color au lieu de background : ça ne change rien.

tr.sub:nth-of-type(odd) {background-color: #ECF3F7;}
tr.sub:nth-of-type(even) {background-color: #E1EBF2;}

Hervé
Auteur

Merci mais ceci ne fonctionne pas non plus

tr.sub:nth-child(odd) {background-color: #ECF3F7;}
tr.sub:nth-child(even) {background-color: #E1EBF2;}

Le code fonctionne bien comme tu peux le voir dans l'exemple sur jsfiddle, le problème doit donc venir d'autre chose (tu as bien pensé à vider le cache je suppose ?).
Tu as p-e une autre règle css qui surcharge ces règles, il faudrait voir le reste de ton code pour s'en assurer (tu peux éventuellement essayer d'utiliser !important même si ce n'est généralement pas recommandé).

Hervé
Auteur

Vider le cache, bon sans mais c'est bien sur !
Ça fonctionne, merci.