a:nth-child(1)

[André]

Hallo,

ich möchte dem ersten a innerhalb von <article class="anzeige"> ein margin-right verpassen. Meine Idee war:

.anzeige a {
    width: 45%;
    margin-top: 2em;
    display: inline-block;
}

.anzeige a:nth-child(1) {
    margin-right: 3em;
}

.anzeige a:nth-child(2) {
    margin-right: 0em;
}

Interessiert den Browser aber nicht, es wird kein Abstand angezeigt. Der Aufbau lautet:

<article class="anzeige">
	<h2>Test Ausgabe</h2>
	<a href="#" arget="_blank"><img src="" /></a>
	<a href="#" arget="_blank"><img src="" /></a>
	<iframe width="100%" height="166" scrolling="no" frameborder="no" src="#"></iframe>
</article>

Nachtrag: Dieses verstehe ich nicht, aber so funktioniert es

.anzeige a:nth-child(2) {
    margin-right: 3em;
}

.anzeige a:nth-child(4) {
    margin-right: 0em;
}

Kann mir dieses jemand erklären?

[Der Martin]

Hi,

ich möchte dem ersten a innerhalb von <article class="anzeige"> ein margin-right verpassen. Meine Idee war:

.anzeige a:nth-child(1) {
    margin-right: 3em;
}

damit selektierst du ein a-Element, das innerhalb seines Elternelements mit der Klasse anzeige das erste Kindelement ist. Ein solches Kindelement gibt es in deinem Markup aber nicht, das erste Kind von .anzeige ist ein h2-Element:

<article class="anzeige">
	<h2>Test Ausgabe</h2>
	<a href="#" arget="_blank"><img src="" /></a>
	<a href="#" arget="_blank"><img src="" /></a>
	<iframe width="100%" height="166" scrolling="no" frameborder="no" src="#"></iframe>
</article>

Interessiert den Browser aber nicht, es wird kein Abstand angezeigt.

Völlig korrekt. Vielleicht möchtest du in deinem Fall lieber die Pseudoklasse nth-of-type verwenden?

So long,
 Martin

[André]

Hallo,

damit selektierst du ein a-Element, das innerhalb seines Elternelements mit der Klasse anzeige das erste Kindelement ist. Ein solches Kindelement gibt es in deinem Markup aber nicht, das erste Kind von .anzeige ist ein h2-Element:

vielen Dank für deine Erklärung.

Völlig korrekt. Vielleicht möchtest du in deinem Fall lieber die Pseudoklasse nth-of-type verwenden?

genau danach habe ich gesucht. Ich verwechsle nth-of-type und nth-child immer wieder.

[Matthias Apsel]

Hallo André,

genau danach habe ich gesucht. Ich verwechsle nth-of-type und nth-child immer wieder.

Der Unterschied ist in etwa der zwischen erstem Kind und erster Tochter. (Stammt irrc ursprünglich von @ChrisB)

Bis demnächst
Matthias

[Der Martin]

Hallo,

mir ist da noch etwas aufgefallen.

<article class="anzeige">
	<h2>Test Ausgabe</h2>
	<a href="#" arget="_blank"><img src="" /></a>
	<a href="#" arget="_blank"><img src="" /></a>
	<iframe width="100%" height="166" scrolling="no" frameborder="no" src="#"></iframe>
</article>

Ich gehe mal davon aus, dass das zweimalige Auftreten von arget ein mit Copy&Paste vervielfältigter Tippfehler ist und eigentlich target heißen wollte.

Falls ja: Lass das bitte weg. Es ist sehr lästig, wenn Webautoren einem das Öffnen von neuen Tabs oder Fenstern aufzwingen. Überlass diese Entscheidung bitte den Besuchern selbst.

So long,
 Martin

[André]

Hallo,

Ich gehe mal davon aus, dass das zweimalige Auftreten von arget ein mit Copy&Paste vervielfältigter Tippfehler ist und eigentlich target heißen wollte.

Ja, dieses ist beim Kopieren passiert.

Falls ja: Lass das bitte weg. Es ist sehr lästig, wenn Webautoren einem das Öffnen von neuen Tabs oder Fenstern aufzwingen. Überlass diese Entscheidung bitte den Besuchern selbst.

Hatte ich eine Zeitlang auch. Dann haben mich ein paar User ganz böse angeschrieben und meinten „Ich habe über Minuten einen Beitrag geschrieben, wollte auf einen Link zum Produkt klicken und mein Beitrag war weg, weil der Browser den Link im gleichen Fenster aufgemacht hat“.

Möchte natürlich keine User verärgern.

[Der Martin]

Hi,

Es ist sehr lästig, wenn Webautoren einem das Öffnen von neuen Tabs oder Fenstern aufzwingen. Überlass diese Entscheidung bitte den Besuchern selbst.

Hatte ich eine Zeitlang auch. Dann haben mich ein paar User ganz böse angeschrieben und meinten „Ich habe über Minuten einen Beitrag geschrieben, wollte auf einen Link zum Produkt klicken und mein Beitrag war weg, weil der Browser den Link im gleichen Fenster aufgemacht hat“.

das ist zwar für die Betroffenen ärgerlich, keine Frage, aber in diesem Fall würde ich ziemlich überzeugt die Diagnose stellen: BZB (Bediener zu blöd).
Es ist in gefühlten 99%, nein, fast 100% der Fälle so, dass beim Anklicken eines Links die verlinkte Ressource im gleichen Browserfenster bzw. -tab geladen wird und das aktuell angezeigte Dokument ersetzt. Dass man nicht einfach einen Link anklickt, während man noch irgendwo Formularfelder ausfüllt, halte ich eigentlich für selbstverständlich.

Möchte natürlich keine User verärgern.

Klar, das ist ein Dilemma: Egal ob mit oder ohne target="_blank", ein paar Besucher wirst du dennoch verärgern. Fragt sich nur, welcher Anteil der größere ist.

So long,
 Martin

[Gunnar Bittersmann]

@@André

Dann haben mich ein paar User ganz böse angeschrieben und meinten „Ich habe über Minuten einen Beitrag geschrieben, wollte auf einen Link zum Produkt klicken und mein Beitrag war weg, weil der Browser den Link im gleichen Fenster aufgemacht hat“.

Möchte natürlich keine User verärgern.

Warum speicherst du die schon gemachten Eingaben nicht im localStorage und schreibst sie dann bim nächsten Seitenaufruf wieder in die Eingabefelder? Beim Navigieren mit dem Zurück-Button sollten die Eingaben aber auch von alleine wieder da sein.

LLAP 🖖

[Der Martin]

Hallo Gunnar,

Beim Navigieren mit dem Zurück-Button sollten die Eingaben aber auch von alleine wieder da sein.

das ist vor allem Browser- und Einstellungs-abhängig.

Und anscheinend auch noch situationsabhängig. Wenn ich in meinem Opera die Zurück-Navigation nutze (was sehr selten der Fall ist), sind Eingaben in Formularfeldern manchmal wieder da, manchmal auch nicht. Keine Ahnung, wovon das abhängt; es war mir noch nicht wichtig genug, das näher zu untersuchen.

Ciao,
 Martin

[MrMurphy1]

Hallo

das

Nachtrag: Dieses verstehe ich nicht, aber so funktioniert es

...
.anzeige a:nth-child(4) {
    margin-right: 0em;
}

kann bei deinem Quelltext nicht funktionieren.

Bei den ersten Schritten mit Selektoren ist es hilfreich zum Testen Hintergrundfarben zu setzen um zu erkennen, ob das gewünschte Element auch angesprochen wird.

Gruss

MrMurphy