tr: nth-child (pair) aide. comment postuler à une classe?

Je ne suis pas très bon avec CSS et j'ai besoin d'aide.tr: nth-child (pair) aide. comment postuler à une classe?

J'ai une table où je veux que toutes les autres lignes soient grises et les lignes alternantes soient blanches. mais je veux seulement que cela se produise sur une table particulière.

j'ai ajouté un code à mon CSS:

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

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

mais le problème est que son affectant chaque table sur mon site. Je n'ai trouvé aucun exemple où il s'applique uniquement à une certaine classe. Est-ce possible? Je veux qu'il seulement:

table.dashboardtable

Source

2009-10-15 user190284

Utilisez le descendant CSS combinateur (juxtaposition) comme d'habitude:

table.dashboardtable tr:nth-child(even) 
table.dashboardtable tr:nth-child(odd)

Source

2009-10-15 01:09:59 hobbs

merci! C'est exactement ce dont j'avais besoin. pour une raison quelconque, je mettais un point entre dashboardtable et tr. Quelle erreur stupide. lol. – user190284

J'imagine que ce serait une bonne idée d'utiliser 'table.dashboardtable> tr: nth-child' (le sélecteur enfant'> '), de sorte que si vous avez des tables imbriquées, cela ne s'applique pas accidentellement à celles-ci. –

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

Habituellement vous voulez utiliser nth-of-type, qui ne s'appliquera le type que vous spécifiez. Cela laissera d'autres éléments. Si vous voulez tous les même tr avoir cette couleur d'arrière-plan, essayez:

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

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

More info on CSS Selectors

Source

2009-10-15 01:12:22 Marius

ive seulement essayé avec ff3, mais impair et même travaillent pour moi. Mauvais passage à la formule juste au cas où il ya des navigateurs qui ne supportent pas les mots si. Merci! – user190284

Hope this fait 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>

Source

2012-05-16 22:22:14 Scott

tr: nth-child (pair) aide. comment postuler à une classe?

Répondre

Questions connexes