:nth Tester. Przetestuj selektory nth

Są w internecie takie narzędzia, bez których programista nie mógłby się obyć, choć nie robią one zbyt wiele. Jednym z takich narzędzi jest dla mnie :nth Testert autorstwa Chrisa Coyera, który testuje selektory typu :nth-*. Selektory te stają się coraz powszechniej wspierane, o czym przekonuje choćby caniuse.com (tylko IE 8 w dół nie posiada wsparcia), tak więc coraz częściej sięgam po nie w różnych projektach. Samo narzędzie nie jest niczym nowym, ale może ktoś jeszcze o nim nie słyszał. Ostatnio doczekało się nawet aktualizacji o czym można przeczytać tutaj.

Link do narzędzia: http://css-tricks.com/examples/nth-child-tester/

Czym są selektory :nth?

Krótko, bo to temat na osobny artykuł. Jest to grupa pseudo-klas , do których zaliczamy:

:nth-child(n)
:nth-of-type(n)
:nth-last-child(n)
:nth-last-of-type(n)

Dzięki nim możemy łatwo nadawać style grupie wybranych elementów np. jeżeli użyjemy poniższej deklaracji:

li:nth-child(odd) {
   color: red
}

każdy nieparzysty element listy będzie miał tekst w kolorze czerwonym. To samo można osiągnąć poniższą linijką:

li:nth-child(2n+1) {
   color: red
}

co oznacza: „Wybierz mi co drugiego potomka zaczynając od pierwszego”. Jeżeli użyjemy selektorów ze słowem last, elementy wybierane będą od końca.

Różnica pomiędzy nth-child i nth-of-type

Jak już pewnie zauważyłeś, są dwa typy tych selektorów, a różnicę między nimi widać tylko kiedy masz kilka elementów różnego rodzaju. Dla przykładu mamy element listy:

<li><span> <span><div> <div></li>

Różnica jest tak, że jeżeli użyjemy selektora nth-child() to pozycja danego elementu jest ustalana względem wszystkich elementów, niezależnie od typu, np:

div:nth-child(1) {
   ...
}

nie zaznaczy nam żadnego div, ponieważ pierwszy taki element jest dopiero 3 dzieckiem listy. W przypadku użycia nth-of-type pozycja danego elementu jest ustalana względem innych elementów tego samego typu. Tak więc w powyższym przykładzie, wybrany zostanie pierwszy div.

Podsumowanie

Temat nie został do końca wyczerpany, ale mam nadzieję, że osobom nie znającym wcześniej selektorów nth choć trochę naświetliłem temat. Po więcej zapraszam choćby na css-tricks.com.