CSS :nth-child()
Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
:nth-child() to pseudoklasa CSS, która pozwala wybrać element na podstawie jego pozycji wśród elementów potomnych tego samego rodzica. Jest często używana do formatowania wybranych wierszy tabeli, elementów listy lub kafelków w układzie strony.
Składnia
selektor:nth-child(wzor) {
właściwość: wartość;
}
W miejscu wzor można użyć m.in.:
even- elementy parzyste: 2, 4, 6 itd.,odd- elementy nieparzyste: 1, 3, 5 itd.,- liczby, np.
3- tylko trzeci element, - wzoru, np.
2n- co drugi element.
Przykład z tabelą
tr:nth-child(even) {
background-color: #F2F2F2;
}
Ten zapis oznacza: wybierz parzyste elementy <tr>, czyli parzyste wiersze tabeli, i ustaw im kolor tła #F2F2F2.
Analogicznie:
tr:nth-child(odd) {
background-color: lightgray;
}
wybrałoby nieparzyste wiersze tabeli.
Ważne na egzaminie
Warto zapamiętać, że nth-child(even) nie oznacza wszystkich elementów, tylko te o parzystej pozycji. W przypadku tabeli selektor tr:nth-child(even) służy typowo do tworzenia efektu naprzemiennego kolorowania wierszy.