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

En ajoutant une classe à la première tr ou les suivantes tr s. Il n'existe aucun moyen de sélectionner les rangées que vous souhaitez à l'aide de CSS uniquement.

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

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

Answer 2

Je suis surpris que personne n'ait mentionné l'utilisation des combinateurs de liens de parenté, qui sont pris en charge par IE7 et les 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 en tout cas) que :

tr:not(:first-child)

Answer 3

Solution idéale mais non supportée par IE

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

La deuxième solution serait de donner un style à tous les tr's, puis de le remplacer par du css pour le premier enfant :

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

Answer 4

Il semble que la "première ligne" dont vous parlez soit votre en-tête de tableau - vous devriez donc penser à utiliser thead y tbody dans votre balisage ( cliquez ici ), ce qui permettrait d'obtenir un "meilleur" balisage (sémantiquement correct, utile pour les lecteurs d'écran, par exemple) et des possibilités de sélection css plus faciles et adaptées aux différents navigateurs ( table thead ... { ... } )

Answer 5

Le sélecteur :not n'est pas le meilleur choix car il n'est pas pris en charge par les navigateurs. Vous pouvez utiliser nth-of-type() à la place. Cet exemple sélectionnera tous les éléments tr sauf le premier.

tr:nth-of-type(n+2)

Pour que cela fonctionne pour IE8 et les versions antérieures, vous pouvez utiliser quelque chose comme ceci

$.expr[':']['nth-of-type'] = function(elem, i, match) {
    if (match[3].indexOf("n") === -1) return i + 1 == match[3];
    var parts = match[3].split("+");
    return (i + 1 - (parts[1] || 0)) % parseInt(parts[0], 10) === 0;
};

j'aimerais pouvoir trouver la réponse de stackoverflow où j'ai trouvé ce sélecteur jQuery personnalisé, il a été incroyablement utile, s'il vous plaît postez un lien vers lui si vous le savez.