Comment sélectionner tous les tr sauf le premier dans le tableau ?

Question

Comment puis-je sélectionner tous les tr sauf pour le premier élément tr dans le tableau avec CSS ?

J'ai essayé d'utiliser cette méthode, mais j'ai constaté qu'elle 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/

Answer 1

Bien que la question ait déjà une réponse décente, je veux juste souligner que la :first-child 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 voulez que seuls les deux seconds éléments soient affectés d'une marge, mais pas le premier, vous devez le faire :

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

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

Answer 2

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

Answer 3

Désolé, je sais que c'est vieux, mais pourquoi ne pas styliser tous les éléments tr comme vous le souhaitez, sauf le premier, et utiliser la classe psuedo :first-child 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

Answer 4

Vous pouvez également utiliser un sélecteur de pseudo-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/ Il s'agit d'une bonne source pour expliquer les sélecteurs de pseudo-classes : http://css-tricks.com/pseudo-class-selectors/

Answer 5

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

Pour ce faire, il faut écrire

<tr class="unselected">

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

unselected {
  text-align:center;
}

selected {
  text-align:right;
}