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

tablas en html ejemplos

Question

¿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/

Answer 1

Añadiendo una clase al primer tr o al tr posterior. No hay una forma cruzada de seleccionar las filas que desea con CSS solo.

Sin embargo, si no te importa Internet Explorer 6, 7 u 8:

tr:not(:first-child) {
    color: red;
}

Answer 2

Aunque la pregunta ya tiene una respuesta decente, solo quiero enfatizar que la etiqueta :first-child va en el tipo de elemento que representa a los niños.

Por ejemplo, en el código:

<div id"someDiv">
     <input id="someInput1" /> 
     <input id="someInput2" />
     <input id="someInput2" />
</div

Si quieres afectar solo los dos segundos elementos con un margen, pero no el primero, harías:

#someDiv > input {
     margin-top: 20px;
}
#someDiv > input:first-child{
     margin-top: 0px;
}

es decir, dado que las input s son las first-child colocará el first-child en la parte de entrada del selector.

Answer 3

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

Answer 4

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)

Answer 5

Otra opción:

tr:nth-child(n + 2) {
    /* properties */
}

Answer 6

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;
}

Answer 7

Solución ideal pero no soportada en IE

tr:not(:first-child) {css}

La segunda solución sería diseñar todos los tr y luego anularlos con css para el primer hijo:

tr {css}
tr:first-child {override css above}

Answer 8

También puedes usar un selector de pseudo clase en tu CSS como este:

.desc:not(:first-child) {
    display: none;
}

Eso no aplicará la clase al primer elemento con la clase .desc.

Aquí hay un JSFiddle con un ejemplo: http://jsfiddle.net/YYTFT/ , y esta es una buena fuente para explicar los selectores de pseudo clase: http://css-tricks.com/pseudo-class-selectors/

Answer 9

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

Answer 10

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 ... { ... } )