tr:nth-child(encore) de l'aide. comment faire pour s'appliquer à une classe?

Je ne suis pas très bon avec les CSS et j'ai besoin d'aide.

J'ai une table où je veux toutes les autres lignes à être de couleur grise et de l'alternance des lignes à blanc. mais je ne veux que cela se produise sur une table particulière.

J'ai ajouté un peu de code pour mon CSS:

tr:nth-child(even) {  
background: #CCC;  
}  

tr:nth-child(odd) {  
background: #FFF;  
}

mais le problème, c'est que son influence sur chaque tableau sur mon site.
Je n'ai pas trouvé d'exemples où il ne s'applique qu'à une certaine classe. Est-ce possible? Je veux qu'elle s'applique uniquement à:

table.dashboardtable

OriginalL'auteur user190284 | 2009-10-15

  1. 9

    Utiliser le CSS descendant du combinator (juxtaposition) comme d'habitude:

    table.dashboardtable tr:nth-child(even)
table.dashboardtable tr:nth-child(odd)
    merci!!!! c'est exactement ce dont j'avais besoin. pour une raison que je mettais un point entre les dashboardtable et tr. ce une erreur stupide. lol.
    J'imagine qu'il pourrait être une bonne idée d'utiliser table.dashboardtable > tr:nth-child (le sélecteur d'enfant >), de sorte que si vous avez des tableaux imbriqués, il n'est pas accidentellement appliquer à ceux-ci.

    OriginalL'auteur hobbs

  2. 2

    nth-child et nth-of-type accepter odd et even ainsi que d'une formule comme an+b, où a et b sont des constantes.

    Habituellement, vous souhaitez utiliser nth-of-type, qui s'applique uniquement au type que vous spécifiez. Qui laissera à d'autres éléments. Si vous voulez tous les deux tr pour avoir cette couleur d'arrière-plan, puis essayez:

    tr:nth-of-type(2n){
  background: #CCC;
}

tr:nth-of-type(2n+1){
  background: #FFF;
}

    Plus d'infos sur les Sélecteurs CSS

    ive seulement essayé avec ff3, mais les paires et impaires sont de travailler pour moi. mal passer à la formule juste au cas où il y a des navigateurs qui ne soutien les mots. merci!

    OriginalL'auteur Marius

  3. 2

    Espérons que cela a du sens.

    <!DOCTYPE html>

<html>
  <head>
    <style type="text/css">
      #customers tr:nth-child(even){
        background-color:white;
      }
      #customers tr:nth-child(odd){
        background-color:Lavender;
      }
    </style>
  </head>

  <body>
    <p>In your markup define your table:</p>
      <table id="customers"></table>
  </body>
</html>

    OriginalL'auteur Scott