MrMurphy: Sturmverliebt - nth-child(3n)

Beitrag lesen

Hallo Sturmverliebt

bei CSS-Angaben musst du auch auf die Reihenfolge der Eingabe achten. Spätere Angaben sollen vorherige überschreiben.

Wenn du schreibst

  
figure:nth-child(3n){  
    position: relative;  
    width: 310px;  
    height: 200px;  
        float:left;  
        margin:0 0px 20px 0  
}  
  
figure {  
    position: relative;  
    width: 310px;  
    height: 200px;  
        float:left;  
        margin:0 7px 20px 0  
}  
  

werden die Angaben vom "figure:nth-child(3n)" durch das "figure" überschrieben. (Bei den margin fehlen auch die abschließenden Semikolon)

Deshalb solltest du die beiden tauschen. Der Übersichtlichkeit und späteren Pflege wegen solltest du beim nth-child auch nur die Änderungen eintragen. Also

  
  
figure {  
    position: relative;  
    width: 310px;  
    height: 200px;  
    float:left;  
    margin:0 7px 20px 0;  
}  
  
figure:nth-child(3n){  
    margin-right: 0;  
}  
  

margin-right, weil du bei "margin:0 0 20px 0;" immer erst den Ursprungszustand suchen und vergleichen müssest, welche Änderungen überhaupt erreicht werden sollen. In längeren CSS-Dateien stehen die Angaben nicht immer direkt übereinander.

Gruss

MrMurphy