Jak wybrać pierwszego i ostatniego niszczyciela z rzędu?

170

Jak wybrać pierwszy i ostatni TDz rzędu?

tr > td[0],
tr > td[-1] {
/* styles */
}
clarkk
źródło

Odpowiedzi:

377

Możesz użyć :first-childi :last-childpseudo-selektorów:

tr td:first-child,
tr td:last-child {
    /* styles */
}

Powinno to działać we wszystkich głównych przeglądarkach, ale IE7 ma pewne problemy, gdy elementy są dodawane dynamicznie (i nie będzie działać w IE6).

James Allardice
źródło
a co jeśli chcesz wybrać drugie i trzecie dziecko?
clarkk
2
i jaka jest różnica między tr > tdi tr td?
clarkk
Poniższa reguła określa styl wszystkich elementów P, które są dziećmi BODY: body> P {line-height: 1.3} Możesz zobaczyć na: w3.org/TR/CSS2/selector.html#child-selectors (ta sama strona opublikowana Jamesa)
Francesco
4
@clarkk - >wybiera tylko bezpośrednie dzieci. Bez niej wybrani zostaną wszyscy potomkowie (np. Dzieci dzieci). Aby wybrać drugie lub trzecie dziecko, spójrz na nth-childpseudo-selektor.
James Allardice
@BoltClock Widziałem kiedyś twoje rozwiązanie tego problemu za pomocą +. coś takiego, tr td + td + .... +td ale co, jeśli nie wiem, ile mam td?
Royi Namir
19

Możesz użyć następującego fragmentu kodu:

  tr td:first-child {text-decoration: underline;}
  tr td:last-child {color: red;}

Korzystanie z następujących pseudoklas:

: pierwsze dziecko oznacza „wybierz ten element, jeśli jest pierwszym dzieckiem swojego rodzica”.

: last-child oznacza "wybierz ten element, jeśli jest ostatnim dzieckiem swojego rodzica".

Dotyczy to tylko węzłów elementów (znaczników HTML), te pseudoklasy ignorują węzły tekstowe.

Francesco
źródło
15

Możesz użyć : first-child i : last-child pseudo-selectors :

tr td:first-child{
    color:red;
}
tr td:last-child {
    color:green
}

Lub możesz użyć innego sposobu, na przykład

// To first child 
tr td:nth-child(1){
    color:red;
}

// To last child 
tr td:nth-last-child(1){
    color:green;
}

Obie drogi działają doskonale

Ajay Gupta
źródło
2

Jeśli używasz sass (scss), możesz użyć następującego fragmentu:

tr > td{
   /* styles for all td*/
   &:first-child{
     /* styles for first */ 
   }
   &:last-child{
    /* styles for last*/
   }
 }
Elbaz
źródło
2

Jeśli wiersz zawiera pewne wiodące (lub końcowe) thznaczniki zanim tdnależy użyć :first-of-type, a :last-of-typeselektorów. W przeciwnym razie pierwszy tdnie zostanie wybrany, jeśli nie jest pierwszym elementem wiersza.

To daje:

td:first-of-type, td:last-of-type {
    /* styles */
}
Christopher Chiche
źródło
1
zaoszczędziłeś czas, użyłem ostatniego dziecka, które nie działało, ale Twoje rozwiązanie działało idealnie
Mirza Obaid