Sélectionnez tous les «tr» sauf le premier

Comment puis-je sélectionner tous les tréléments sauf le premier trdans un tableau avec CSS?

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

En ajoutant une classe au premier trou au suivant trs. Il n'y a aucun moyen de sélectionner les lignes que vous souhaitez avec CSS seul.

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

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

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 deux exactement de la même manière (dans le contexte des tableaux HTML de toute façon) que:

tr:not(:first-child)

solution idéale mais non prise en charge dans IE

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

la deuxième solution serait de styliser tous les tr, puis de remplacer avec css pour le premier enfant:

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

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

Bien que la question ait déjà une réponse décente, je veux juste souligner que la :first-childbalise va 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 seconds éléments avec une marge, mais pas le premier, vous feriez:

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

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

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 utiliser 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

Étant donné que tr:not(:first-child)n'est pas pris en charge par IE 6, 7, 8. Vous pouvez utiliser l'aide de jQuery. Vous pouvez le trouver ici

Une autre option:

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

Peut-être que quelqu'un peut en bénéficier, voici ce que j'ai utilisé

ol li:not(:first-child) {
    background: black;
    color: white;
}

Vous pouvez également utiliser un pseudo sélecteur de classe dans votre CSS comme ceci:

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

Cela n'appliquera pas la classe au premier élément avec la classe .desc.

Voici un JSFiddle avec un exemple: http://jsfiddle.net/YYTFT/ , et ceci est une bonne source pour expliquer les sélecteurs de pseudo-classe: http://css-tricks.com/pseudo-class-selectors/

Vous pouvez créer une classe et utiliser la classe lorsque vous définissez tous vos futurs que vous voulez (ou ne voulez pas) être sélectionnés par le CSS.

Cela se ferait en écrivant

<tr class="unselected">

puis dans votre css ayant les lignes (et en utilisant la commande text-align comme exemple):

unselected {
  text-align:center;
}



selected {
  text-align:right;
}