html Seleccione todos los elementos 'tr' excepto el primer 'tr' en una tabla con CSS



5 Answers

Me sorprende que nadie mencione el uso de combinadores de hermanos, que son compatibles con IE7 y posteriores:

tr + tr /* CSS2, adjacent sibling */
tr ~ tr /* CSS3, general sibling */

Ambos funcionan exactamente de la misma manera (en el contexto de las tablas HTML) como:

tr:not(:first-child)
html css html-table css-selectors

¿Cómo puedo seleccionar todos los elementos tr , excepto el primer tr en una tabla con CSS?

Intenté usar este método pero encontré que no funcionó:

http://www.daniel-lemire.com/blog/archives/2008/08/22/how-to-select-even-or-odd-rows-in-a-table-using-css-3/




suena como la 'primera línea' de la que hablas es tu encabezado de tabla, por lo que realmente deberías pensar en utilizar thead y tbody en tu thead ( thead clic aquí ), lo que daría como resultado una thead 'mejor' (semánticamente correcta, útil para las cosas como lectores de pantalla) y posibilidades más fáciles de usar para todos los navegadores para css-selection ( table thead ... { ... } )




Lo siento, sé que esto es antiguo, pero ¿por qué no estiliza todos los elementos tr de la forma que desee, excepto el primero y el uso de la clase psuedo: first-child, donde revoca lo que especificó para todos los elementos tr?

Mejor descrito por este ejemplo:

http://jsfiddle.net/DWTr7/1/

tr {
    border-top: 1px solid;
}
tr:first-child {
    border-top: none;   
}

/ Patrik




Ya que tr:not(:first-child) no es compatible con IE 6, 7, 8. Puedes usar la ayuda de jQuery. Puedes encontrarlo here




Puede crear una clase y usarla cuando defina todos los futuros que desee (o no desee) que sean seleccionados por el CSS.

Esto se haría por escrito

<tr class="unselected">

y luego en su css con las líneas (y usando el comando text-align como ejemplo):

unselected {
  text-align:center;
}



selected {
  text-align:right;
}



Related