00 Stimmen

CSS: Erstes DIV ohne linken Rand

Frage von Gast | 17.02.2014 um 16:55

Ich habe auf meiner Website einige DIV-Container nebeneinander liegen. Diese sind mit einem float:left und einer festen Breite versehen, so dass sie schön Stück für Stück nebeneinander angeordnet sind.

Zusätzlich hat jeder dieser Container einen linken Rand (border-left), um die Container voneinander abzugrenzen.

Nun möchte ich erreichen, dass der Rand nur zwischen den Containern angezeigt wird:

x|x|x|x|x|x|x

Bei mir sieht es aber leider folgendermaßen aus:

|x|x|x|x|x|x|x

Der erste Rand soll weg und ungern würde ich manuell bei jeder ersten Box ein "border:none" ausgeben, da je nach Seitenaufbau einmal die eine und einmal die andere Box an erster Stelle stehen können und es daher entsprechend schwierig und unübersichtlich zu programmieren wäre.

Gibt es irgendeine CSS-Eigenschaft, die genau das Problem für mich löst?

AntwortenPositivNegativ
Avatar Stefan Trost
1Beste Antwort1 Stimme

Ja, es gibt eine Möglichkeit mit purem CSS. Es ist der Selektor :first-child und selektiert immer das erste Child innerhalb eines anderen Elements.

Nehmen wir an, das sind deine Boxen:

<div class="andereselement">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Alle haben die Klasse "box", in der auch der linke Rand definiert ist:

.box{border-left: 1px solid #000;}
.box:first-child{border: none;}

Mit ".box:first-child" kannst du in diesem Fall die erste Box ansprechen und entsprechend keinen Rand bei dieser Box anzeigen lassen.
18.02.2014 um 21:17

AntwortenPositiv Negativ
Antworten

Ähnliche Themen

CSS-Stylesheets in HTML einbinden

Tutorial | 0 Kommentare

jQuery: DIV-Container abhängig von Checkbox anzeigen oder ausblenden

Tutorial | 2 Kommentare

jQuery: Ein DIV aufklappen - andere DIVs zuklappen

Tutorial | 14 Kommentare

HTML5 Canvas: Einsteiger Tutorial Teil 3 - Rechtecke und Kreise

Tutorial | 0 Kommentare

Website Performance: Javascript und CSS komprimiert ausliefern und Ladezeiten verkürzen

Tutorial | 0 Kommentare

jQuery: CSS Stylesheet Switcher

Tutorial | 1 Kommentar

Hintergrund einer Website verdunkeln (Gray Out Effekt)

Tutorial | 0 Kommentare

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.