I CSS giver nth-of-type dig mulighed for at vælge elementer udfra deres placering i en container. Dette gør det nemmere at style elementer uden brug af ekstra klasser.
Sådan virker det
I eksemplet bruger vi nth-of-type(n + 2) til at ramme alle delementer, der er søskende af samme type (div), og som mindst er det andet child. n + 2 betyder, at den begynder at vælge fra det andet element og frem.
nth-of-type(-1n + 3) vælger elementer, der er det tredje child eller tidligere i deres parentcontainer, ud fra slutningen af listen. -1n + 3 betyder, at den vælger det tredje element fra slutningen (se illustration).
.container div:nth-of-type(n + 2):nth-of-type(-1n + 3) {
background-color: orange;
}
Det er rimelig fedt.
Med nth-of-type kan du ramme elementer inden for en container udfra deres position i en række.
Kevin Powell fortæller mere om nth-of-type her.