Probleme mit nth-child

[Konny]

Ich weis nicht wie ich es bewerkstelligen soll:
Ich möchte eine grössere Anzahl von Boxen einblenden.
Jede Box sollte zu nächste einen Abstand von 10 Pixel haben,
jedoch sollte jede 4 Box keinen Abstand haben.

zur besseren Darstellung hab ich es statt Abstand mit einem BORDER gemacht.

Aber leider funktioniert es nicht, es werden zwar die Boxen angezeigt aber ohne cild.

.box li{
width:150px;
height:150px;
border: 1px solid #ff0000;
border-right: 10px solid #ff0000;
float:left;
}

.box li:nth-child (3) {border-right: 0;}

[misterunknown]

Moin,

.box li{
width:150px;
height:150px;
border: 1px solid #ff0000;
border-right: 10px solid #ff0000;
float:left;
}
.box li:nth-child (3) {border-right: 0;}

Habe dein Beispiel übernommen und folgendes geändert:
     - display:none;  statt  float:left;
     - :nth-child(3n)  statt nur  :nth-child(3)

Es funktioniert bei mir sowohl mit "3" als auch mit "3n", der Unterschied ist, dass bei 3 nur _das_ dritte Element keine border erhält und bei 3n _jedes_ dritte Element keine border erhält.

Eigentlich sollten alle aktuellen Browser diesen Selektor unterstützen.

Link zum Beispiel.

Grüße Marco

[Gunnar Bittersmann]

@@Konny:

nuqneH

.box li:nth-child (3) {border-right: 0;}

Der CSS-Validator wird dir einen Syntax-Fehler melden. Das Leerzeichen ist’s.

jedoch sollte jede 4 Box keinen Abstand haben.

CSS beginnt bei 1 zu zählen, nicht bei 0.

Außerdem fehlt das „jede“ in deinem Selektor.

Qapla'

[Der Martin]

Hallo,

Ich möchte eine grössere Anzahl von Boxen einblenden.
Jede Box sollte zu nächste einen Abstand von 10 Pixel haben,
jedoch sollte jede 4 Box keinen Abstand haben.

wie sieht das Markup (HTML) dazu aus? Ich vermute nämlich, dass du außer den schon genannten formalen Fehlern noch einen Denkfehler gemacht hast.

.box li {...}

Das trifft auf li-Elemente zu, die irgendwo innerhalb eines anderen Elements mit der Klasse "box" liegen. Beispiel:

<div class="box">  
 <h2>Jede Menge Boxen!</h2>  
 <ul>  
  <li>Erste Box</li>  
  <li>Zweite Box</li>  
  ...  
 </ul>  
</div>

Ist das denn so? Oder haben stattdessen die li-Elemente selbst die Klasse "box"? Dann wäre der Selektor falsch und müsste eigentlich li.box heißen - wobei man überlegen sollte, ob die Klasse nicht wirklich besser einem Vorfahrenelement zugeordnet werden sollte, etwa dem ul-Container. Das ist dann vernünftig, wenn sonst *alle* List Items dieselbe Klasse bekämen.

.box li:nth-child(3) {...}

Siehe oben. Je nachdem, wie dein Markup aussieht, müsste auch dieser Selektor möglicherweise li.box:nth-child(3) lauten.

Ciao,
 Martin