:nth-of-type / :nth-child spørsmål

17. august 2022

Hei folkens.

Jeg holder på med litt css her.
La oss si jeg har 8 <div> nedover i en container. De 2 første skal ha vanlig styling, de 2 neste skal ha "unormal" style. Så skal de 2 neste ha vanlig igjen.

Hvordan får jeg her valgt tredje og fjerde element og deretter nr 7 og 8 så jeg får stylet disse noe anderledes enn nr 1-2 og 5-6 ?
Jeg sitter på: https://css-tricks.com/examples/nth-child-tester/ men jeg ser ikke en løsning som kan passe meg her.

Må jeg gjøre det dobbelt og rett og slett ha 1 som har :nth-child(4n+3) og en som har :nth-child(4n+4) ?

Noen som har tips?

Sist endret av Gameomanic; 17. august 2022 kl. 19:43.

random105675

Gjest

n/a 0

17. august 2022

Om du kun har 8 div-er og det ikke plutselig blir flere kan du også bruke nth-child(3) hvor nummeret i parantesen er nummeret på elementet du ønsker å style.

Du kan også sette en ekstra css klasse om div-ene generes dynamisk.

Gameomanic

Trådstarter

38 6

17. august 2022

Antall div-er varierer fra 1 til f.eks 20.

Kaizen

682 139

17. august 2022

Må nokk skrive det to ganger, slik som du gjør over her.
Fant et bra eksempel her.

Kaizen

Gameomanic

Trådstarter

38 6

17. august 2022

Okey. Da får jeg bare gjøre det. Er ikke fan av å ha css kode "dobbelt" opp, men får gå for akkurat dette

▼ ... over en uke senere ... ▼

remeron

20 4

28. august 2022

Gi "de 2 neste" samme class navn, style class'en.
Eksempel: https://codepen.io/splashed/pen/bGvPjEJ

Yochi

1.017 228

29. august 2022

Sitat av remeron

Gi "de 2 neste" samme class navn, style class'en.
Eksempel: https://codepen.io/splashed/pen/bGvPjEJ

Vis hele sitatet...

Hvorfor styre med klasser når det kan løses så enkelt:

HTML-kode

div:nth-child(4n+1),
div:nth-child(4n+2){
  background-color: #E18728;
}