web-dev-qa-db-fra.com

Sélectionner tous les éléments 'tr' sauf le premier 'tr' dans un tableau avec CSS

Comment sélectionner tous les éléments tr à l'exception du premier tr d'un tableau avec CSS?

J'ai essayé d'utiliser cette méthode, mais j'ai constaté que cela ne fonctionnait pas:

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

htmlcsshtml-tablecss-selectors
241
Steven Spielberg

En ajoutant une classe à la première tr ou à la suivante trs. Il n'y a pas de méthode crossbrowser pour sélectionner les lignes que vous voulez avec CSS seul.

Toutefois, si vous ne vous souciez pas d'Internet Explorer 6, 7 ou 8:

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

Je suis surpris que personne n'ait mentionné l'utilisation de combinateurs frères, qui sont pris en charge par IE7 et versions ultérieures:

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

Ils fonctionnent tous les deux exactement de la même manière (dans le contexte des tableaux HTML) que:

tr:not(:first-child)
221
BoltClock

solution idéale mais non supportée dans IE

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

la deuxième solution consisterait à styler tous les tr puis à les remplacer par css pour le premier enfant:

tr {css}
tr:first-child {override css above}
26
Mark Steggles

sonne comme la "première ligne" dont vous parlez est votre en-tête de table - vous devriez donc vraiment penser à utiliser thead et tbody dans votre balisage ( cliquez ici ) ce qui résulterait en un "meilleur" balisage (correct sémantiquement, utile pour des choses comme les lecteurs d'écran) et des possibilités plus faciles, multi-navigateurs pour la sélection css (table thead ... { ... })

10
oezi

Bien que la question ait déjà une réponse décente, je tiens simplement à souligner que la balise :first-child figure sur le type d'élément qui représente les enfants.

Par exemple, dans le code:

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

Si vous souhaitez affecter uniquement les deux derniers éléments avec une marge, mais pas le premier, procédez comme suit:

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

c'est-à-dire que, puisque les inputs sont les enfants, vous placeriez first-child sur la partie d'entrée du sélecteur.

2
CodyBugstein

Une autre option:

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

Désolé, je sais que c'est vieux, mais pourquoi ne pas styler tous les éléments tr comme vous le souhaitez sauf le premier et l'utilisation de la classe psuedo: premier-enfant où vous révoquez ce que vous avez spécifié pour tous les éléments tr.

Mieux décrit par cet exemple:

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

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

/ Patrik

1
Patrik

Puisque tr:not(:first-child) n'est pas supporté par IE 6, 7, 8. Vous pouvez utiliser l'aide de jQuery. Vous pouvez le trouver ici

0
Tapos