:first-child

[heinetz]

Hallo Forum,

ich möchte versuchen diese Ausgabe:

Text 1
Text 2
Text 3

(<div class="field-item">Text 1</div><div class="field-item">Text 2</div><div class="field-item">Text 3</div>)

... folgendermassen mit CSS formatieren:

Text 1 | Text 2 | Text 3

1. die Anordnung habe ich ohne weiteres mit 'display:inline' hinbekommen.
2. Jedem Inhalt eine Pipe voranzustellen funktionierte mit '.field-item:before { content: "|"; }'

Frage a) Funktioniert das mit den gängigen Browsern ?

Damit sieht die Ausgabe aber so aus, dass vor dem ersten Element auch eine Pipe eingefügt wird.

Frage b) Wie löst man das am besten ?

danke für Tipps und

beste gruesse,
heinetz

[Matze]

Hallo!

1. die Anordnung habe ich ohne weiteres mit 'display:inline' hinbekommen.

2 Zwischenfragen:
Warum benutzt du ein Block-Element und setzt es auf inline anstatt gleich ein passendes Inline-Element wie <span> zu verwenden?

Das ganze sieht wie eine Art Menü aus. Ist es eins?
Wenn es eins ist, pack es in eine Liste. <li>-Elemente kannst du floaten. Oder Links sind von Haus aus schon Inline-Elemente.

Grüße, Matze

[heinetz]

Moin,

ich habe keinen Einfluss auf das HTML und kann nur alles mit CSS
machen. Warum wäre zu langwierig zu erklären.

@EKKI

Es kommt darauf an, was Du unter "gängige Browser" verstehst ... ;-)

Mozilla 2 und 3, IE 6 und 7, Safari

@Gunnar

:not(:first-child)::before { content: "|"; }

... hat bei mir Mozilla 2 nicht funktioniert.

gruesse,
heinetz

[Gunnar Bittersmann]

@@heinetz:

nuqneH

Es kommt darauf an, was Du unter "gängige Browser" verstehst ... ;-)
Mozilla 2 und 3, IE 6 und 7, Safari

• Opera
• Chrome

• Firefox 2

:not(:first-child)::before { content: "|"; }
... hat bei mir Mozilla 2 nicht funktioniert.

(1) Firefox 2 ist irrelevant. Mozilla hat schon vor Monaten den Support eingestellt und ruft alle zum Update auf den 3er auf.

(2) Im Firefox 2.0.0.20 funktioniert es.

Qapla'

[EKKi]

Mahlzeit heinetz,

ich möchte versuchen diese Ausgabe:

Text 1
Text 2
Text 3

(<div class="field-item">Text 1</div><div class="field-item">Text 2</div><div class="field-item">Text 3</div>)

... folgendermassen mit CSS formatieren:

Text 1 | Text 2 | Text 3

Deine <div>-Suppe möchte eine Liste sein ... ganz dringend! Wirklich ...

1. die Anordnung habe ich ohne weiteres mit 'display:inline' hinbekommen.
2. Jedem Inhalt eine Pipe voranzustellen funktionierte mit '.field-item:before { content: "|"; }'

Frage a) Funktioniert das mit den gängigen Browsern ?

Beachte das "<http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after@title=Beachten Sie:>"! Es kommt darauf an, was Du unter "gängige Browser" verstehst ... ;-)

Damit sieht die Ausgabe aber so aus, dass vor dem ersten Element auch eine Pipe eingefügt wird.

Frage b) Wie löst man das am besten ?

Indem Du aus Deiner Liste auch eine Liste machst und dann dem <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#first_line_letter_child@title=ersten Listeneintrag> das Pipe-Zeichen wieder wegnimmst. Beachte auch hierbei das "Beachten Sie:"!

MfG,
EKKi

[Gunnar Bittersmann]

@@EKKi:

nuqneH

Indem Du aus Deiner Liste auch eine Liste machst und dann dem <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#first_line_letter_child@title=ersten Listeneintrag> das Pipe-Zeichen wieder wegnimmst.

Oder es für den ersten Listeneintrag gar nicht erst erzeugst:

li:not(:first-child)::before { content: "|"; }

Qapla'

[MudGuard]

Hi,

Text 1 | Text 2 | Text 3
2) Jedem Inhalt eine Pipe voranzustellen funktionierte mit '.field-item:before { content: "|"; }'

Soll das wirklich ein Pipe-Zeichen sein? Keine border?

cu,
Andreas

[ChrisB]

Hi,

(<div class="field-item">Text 1</div><div class="field-item">Text 2</div><div class="field-item">Text 3</div>)

... folgendermassen mit CSS formatieren:

Text 1 | Text 2 | Text 3

Zum Element-/Klassen-Selektor noch den Adjacent sibling Selektor hinzuzunehmen, könnte auch helfen.

MfG ChrisB

[Beat]

Text 1 | Text 2 | Text 3

1. die Anordnung habe ich ohne weiteres mit 'display:inline' hinbekommen.
2. Jedem Inhalt eine Pipe voranzustellen funktionierte mit '.field-item:before { content: "|"; }'

Warum eigentlich einen | verwenden, wenn es mit border geht?
Anderseits: Logisches ODER ist "\2228"
Ein EXOR habe ich nicht gefunden.

Der vertikale Strich wird von Unicode nicht als ODER interpretiert.
http://www.fileformat.info/info/unicode/char/007c/index.htm

Frage a) Funktioniert das mit den gängigen Browsern ?

Bei Ignoranz fehlt etwas verzichtbares.

.mittelschicht abcent + abcent {border-left: 1km exorisch himmelblau;}

mfg Beat