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




5 Answers

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

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




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}



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.




Otra opción:

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



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/




Related