CSS :nth-of-type() 伪类

定义和用法

CSS :nth-of-type(n) pseudo-klasser bruges til at matche som den fælles forælder er af samme type (etiketnavn) den n en underelement, hver element.

n kan være et tal/index, et nøgleord (odd eller even) eller en formel (som an + b)

Tip:Se :nth-child() pseudo-klasser bruges til at vælge som den fælles forælder er den n en underelement, uanset dens type.

Eksempel

Eksempel 1

Hvordan bruger man :nth-of-type() Vælger:

/* Vælg den anden element i div-søskendeelementer */
div:nth-of-type(2) {
  background: red;
}
/* Vælg den anden li-element i listen */
li:nth-of-type(2) {
  background: lightgreen;
}
/* Vælg hvert tredje element i enhver brødrekke */
:nth-of-type(3) {
  background: yellow;
}

Prøv det selv

Eksempel 2

odd og even er en nøgleord, der kan bruges til at matche underelementer med odd eller even indeks (indekset til det første underelement er 1).

Her tildeles forskellige baggrundsfarver til <p>-elementer med odd og even indeks:

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(even) {
  background: blue;
}

Prøv det selv

Eksempel 3

brug formelen (an + b) Beskrivelse:a repræsenterer en heltalsstige, n er alle ikke-negative heltal fra 0.b er en heltalsforskydning.

Her tildeles baggrundsfarve til alle <p>-elementer med indeks, der er multiplum af 3 (valget af den tredje, sjette, niende osv. elementer):

p:nth-of-type(3n+0) {
  background: red;
}

Prøv det selv

Eksempel 4

Her tildeles baggrundsfarve til alle <p>-elementer med indeks, der er multiplum af 3. Derefter trækker vi 1 fra (valget af den anden, femte, ottende osv. elementer):

p:nth-of-type(3n-1) {
  background: red;
}

Prøv det selv

CSS-syntaks

:nth-of-type(index | odd | even | an+b) {
  css-udtryk;
}

Tekniske detaljer

Browser-understøttelse

Tallene i tabellen angiver den første browser-version, der fuldt ud understøtter den pseudoklasse.