¿Cómo puedo seleccionar todos los tr
elementos excepto el primero tr
en una tabla con CSS?
Intenté usar este método, pero descubrí que no funcionaba.
css
css-selectors
Alexander Abakumov
fuente
fuente
<tr>
y una clase diferente para el resto.Respuestas:
Al agregar una clase al primero
tr
o al siguientetr
s. No hay forma de navegador cruzado de seleccionar las filas que desea solo con CSS.Sin embargo, si no le importa Internet Explorer 6, 7 u 8:
fuente
tr:not(:first-of-type)
como una posible solución, si está buscando la primera instancia de un selector específico en lugar del primer hijo generalizado.Me sorprende que nadie haya mencionado el uso de combinadores hermanos, que son compatibles con IE7 y versiones posteriores:
Ambos funcionan exactamente de la misma manera (en el contexto de las tablas HTML de todos modos) como:
fuente
elem + elem
es una excelente solución general para cuando los elementos que desea orientar no son los únicos hijos. Por ejemplo, si a<h2>
va seguido de varias<p>
etiquetas, la primera<p>
no es la primera hija en ese caso.solución ideal pero no compatible con IE
La segunda solución sería diseñar todos los tr y luego anular con css para el primer hijo:
fuente
parece que la "primera línea" de la que estás hablando es el encabezado de la tabla, por lo que realmente deberías pensar en usar
thead
ytbody
en tu marcado (haz clic aquí ) lo que daría como resultado un mejor marcado (semánticamente correcto, útil para cosas como lectores de pantalla ) y posibilidades más fáciles de usar para todos los navegadores para css-selection (table thead ... { ... }
)fuente
Aunque la pregunta ya tiene una respuesta decente, solo quiero enfatizar que la
:first-child
etiqueta va en el tipo de elemento que representa a los niños.Por ejemplo, en el código:
Si desea afectar solo los dos segundos elementos con un margen, pero no el primero, debería hacer lo siguiente:
es decir, dado que los
input
s son los hijos, los colocaríafirst-child
en la parte de entrada del selector.fuente
Lo siento, sé que esto es antiguo, pero ¿por qué no diseñar todos los elementos tr de la manera que desea, excepto el primero y usar 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/
/ Patrik
fuente
Como
tr:not(:first-child)
no es compatible con IE 6, 7, 8. Puede usar la ayuda de jQuery. Puedes encontrarlo aquífuente
Otra opción:
fuente
Puede que alguien pueda beneficiarse, a continuación es lo que usé
fuente
También podría usar un selector de pseudoclase en su CSS como este:
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 pseudo-selectores de clase: http://css-tricks.com/pseudo-class-selectors/
fuente
first-child
ignora las clases.Puede crear una clase y usarla cuando defina todos los futuros que desea (o no quiere) que el CSS seleccione.
Esto se haría escribiendo
y luego en su css teniendo las líneas (y usando el comando text-align como ejemplo):
fuente