tr: nth-child (incluso) ayuda. cómo aplicar a una clase?

No soy muy bueno con CSS y necesito ayuda.tr: nth-child (incluso) ayuda. cómo aplicar a una clase?

Tengo una tabla en la que quiero que las filas de cada dos sean grises y las filas alternas sean blancas. pero solo quiero que suceda en una mesa en particular.

he añadido algo de código para mi CSS:

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

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

pero el problema es que su afectan a cada mesa en mi sitio. No he encontrado ningún ejemplo en el que se aplique solo a una determinada clase. ¿Es eso posible? Quiero que se aplica únicamente a:

table.dashboardtable

Fuente

2009-10-15 user190284

Utilice el combinador CSS descendiente (yuxtaposición), como de costumbre:

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

Fuente

2009-10-15 01:09:59 hobbs

gracias! esto es exactamente lo que necesitaba. por alguna razón, estaba poniendo un punto entre tablero de instrumentos y tr. qué tonto error. lol. – user190284

Imagino que podría ser una buena idea usar 'table.dashboardtable> tr: nth-child' (el selector de elementos secundarios'> '), de modo que si tiene tablas anidadas, no se aplica accidentalmente a ellas. –

nth-child y nth-of-type aceptar odd y even, así como una fórmula como an+b, donde a y b son constantes.

Normalmente desea utilizar nth-of-type, que solo se aplicará al tipo que especifique. Eso dejará afuera otros elementos. Si desea que todos los tr incluso para tener ese color de fondo, y luego tratar:

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

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

More info on CSS Selectors

Fuente

2009-10-15 01:12:22 Marius

he probado solo con ff3, pero par e impar están funcionando para mí. cambiaremos a la fórmula por si acaso hay navegadores que no admiten las palabras. ¡Gracias! – user190284

Espero que esto tenga sentido.

<!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>

Fuente

2012-05-16 22:22:14 Scott

tr: nth-child (incluso) ayuda. cómo aplicar a una clase?

Respuesta

Cuestiones relacionadas