Listenelemente einrücken

[franzsen]

Hallo!
Ist es möglich einzelne Listenelemente einzurücken?
Beispielsweise habe ich eine Sortierte Liste und möchte ab der dritten Listenzeile alle einrücken.
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>.
Nun möchte ich wissen, ob man Listenzeile 3 und 4weiter einrücken kann als Listenzeile 1 und 2?
geht das mit „:nth-child“ und wie müßte das formuliert werden?

[einsiedler]

Schau mal: https://www.mediaevent.de/css/css3-selektor-pseudo.html

Gruß der einsiedelnde

[franzsen]

Danke Einsiedler. Eine sehr informative Seite. Erklärt „nth-child“ sehr eindrucksvoll.
Nicht ganz verstehe ich die Formel dazu:

„Wenn jedes dritte Element einer Reihe gefiltert werden soll, und zwar beginnend mit dem zweiten Element, liefert eine Formel das Element ans CSS.“
a + ( n - 1 ) * d = 2 + ( n - 1 ) * 3 = 2 + ( 3n - 3) = 2 + 3n - 3 = 3n - 1

Es gibt 5 Vertikallinien (Elemente). Wenn „a“ den Beginn des Kindes angibt ist „a“ dann 2 und „n“ also fünf. Das Ergebnis ist nach Adam Riese „3n - 1“. Bis dahin ist alles klar. Gilt für „n“ nach wie vor 5? Was bedeutet dann „3n - 1“? Sicherlich keine Adam Riese-Rechnung mehr, oder?

Im darauffolgendem Beispiel habe ich 10 Elemente.
„li:nth-child(3n-1) { background: red }“

Wo ist notiert, daß es bei Element zwei beginnen soll? Wo, daß jedes 3. Element betroffen ist? Muß man jedesmal nach dieser Formel rechnen?

[Matthias Apsel]

Hallo franzsen,

Im darauffolgendem Beispiel habe ich 10 Elemente.
„li:nth-child(3n-1) { background: red }“

Wo ist notiert, daß es bei Element zwei beginnen soll? Wo, daß jedes 3. Element betroffen ist?

3n = jedes dritte Element.
3 × (n=1) - 1 = 2 = beginne mit dem 2.

Setze für alle Zahlen von 1 bis … ein, und du erhältst alle gewünschten Elemente.

3,6,9,12,15,…

doch halt, du wolltest ja beim 2. beginnen

3n-1 liefert dir für n=1 die gewünschte 2

Bis demnächst
Matthias

[franzsen]

Das heißt also (3.)n-te 3. Element und gleichzeitig eine Rechnung (3 * n(=1) - 1)? Ist n immer 1?

Wenn ich eine Liste mit 8 Elementen habe,
li:nth-child(1n+2) { margin: 10px; color: aqua;}
dann funktioniert das tadellos und alle Elemente vom 2. bis zum Schluß werden alle eingerückt. Allerdings hat „color“ keine Wirkung. Ich habe zwar davor ein stylesheet importiert aber nachdem color danach geschrieben ist, müßte es vorrangig sein?

Die Eingabe
li:nth-child(2,3,4,5,6) { margin: 10px; color: aqua;}
hat, so wie Du angeführt hast, keine Wirkung. Wie müßte ich es formulieren wenn ich vom zweiten bis zum sechsten Element alle eingerückt haben möchte?

[Gunnar Bittersmann]

@@franzsen

Allerdings hat „color“ keine Wirkung. Ich habe zwar davor ein stylesheet importiert aber nachdem color danach geschrieben ist, müßte es vorrangig sein?

Nein. Die Reihefolge spielt eine untergeordnete Rolle in der Kaskade.

li:nth-child(2,3,4,5,6) { margin: 10px; color: aqua;}
hat, so wie Du angeführt hast, keine Wirkung.

Stimmt. Ungültige (oder anderweitig unverständliche) Regeln werden ignoriert.

Wie müßte ich es formulieren wenn ich vom zweiten bis zum sechsten Element alle eingerückt haben möchte?

Die Frage wurde bereits beantwortet, bevor du sie gestellt hast.

LLAP 🖖

[franzsen]

In der Kaskade steht folgender Text:

Werden Eigenschaften in einem style-Attribut festgelegt, so ist diese Eigenschaft spezifischer als jeder Regelsatz in einem Stylesheet.

Unter style-Attribut verstehe ich die Attribute die im head/style formuliert sind. Unter Stylesheet das als eigenes Dokument importiert wird. Da das style-Attribut spezifischer ist, dachte ich hat es Vorrang gegenüber dem Stylesheet.

Wenn
li:nth-child(2,3,4,5,6) { margin: 10px; color: aqua;}
falsch ist habe ich das von Matthias falsch verstanden (3,6,9,12,15,…). Meinte er dann, daß für jedes Element der Code neu geschrieben werden muß/kann beispielsweise
li:nth-child(1n+2) { margin: 10px; color: aqua;}
li:nth-child(1n+3) { margin: 10px; color: aqua;}
li:nth-child(1n+4) { margin: 10px; color: aqua;}, etc.?
eine Formulierung

Die Frage wurde bereits beantwortet, bevor du sie gestellt hast.

Meintest Du damit die Antwort von Matthias?

[Gunnar Bittersmann]

@@franzsen

In der Kaskade steht folgender Text:

Werden Eigenschaften in einem style-Attribut festgelegt, so ist diese Eigenschaft spezifischer als jeder Regelsatz in einem Stylesheet. Unter style-Attribut verstehe ich die Attribute die im head/style formuliert sind.

Nein. Was ein Attribut ist, weißt du? ☞ Elemente, Tags und Attribute

style-Attribut: <div style="background: rebeccapurple; color: white"> (Aber nicht, dass man so etwas machen sollte!)

Unter Stylesheet das als eigenes Dokument importiert wird.

Nochmal nein. Ob <style>-Element (was nicht einmal unbedingt im head stehen muss) oder externe Datei – beides sind Stylesheets.

Meinte er dann, daß für jedes Element der Code neu geschrieben werden muß/kann beispielsweise
li:nth-child(1n+2) { margin: 10px; color: aqua;}
li:nth-child(1n+3) { margin: 10px; color: aqua;}
li:nth-child(1n+4) { margin: 10px; color: aqua;}, etc.?

Man kann Selektoren auch gruppieren:

li:nth-child(1n+2), li:nth-child(1n+3), li:nth-child(1n+4) { margin: 10px; color: aqua;}

Statt 1n kann man auch n schreiben (und +0 weglassen).

Ich würde den Code so formatieren:

li:nth-child(n+2),
li:nth-child(n+3),
li:nth-child(n+4)
{
	margin: 10px;
	color: aqua;
}

Die Frage wurde bereits beantwortet, bevor du sie gestellt hast. Meintest Du damit die Antwort von Matthias?

Nein, ich meinte meine. Ich dachte, sie wäre in diesem Thread gewesen. Ist sie nicht, sondern in einem anderen – da hatte ich mich getäuscht.

LLAP 🖖

[Auge]

Hallo

Die Frage wurde bereits beantwortet, bevor du sie gestellt hast. Meintest Du damit die Antwort von Matthias?

Nein, ich meinte meine. Ich dachte, sie wäre in diesem Thread gewesen. Ist sie nicht, sondern in einem anderen – da hatte ich mich getäuscht.

Sag' jetzt bitte nicht, dass du die Antwort in dem verlinkten Posting gegeben hast. Wenn du hingegen meinst, du hättest im verlinkten Posting die Antwort verlinkt sowie ein weiteres Posting verlinkt, in dem die Antwort ebenfalls verlinkt ist, hast du natürlich recht. Das ist dann aber eine wahrhaft grottige UX (von diesem Thread aus gesehen).

Tschö, Auge

[Gunnar Bittersmann]

@@franzsen

Nun möchte ich wissen, ob man Listenzeile 3 und 4weiter einrücken kann als Listenzeile 1 und 2?
geht das mit „:nth-child“ und wie müßte das formuliert werden?

Ja, geht. :nth-child(an+b) selektiert jedes a-te Element ab dem b-ten.

Beispiel: :nth-child(3n+5) selektiert jedes 3. Element ab dem 5., also Nr. 5, 8, 11, 14 usw.

Wie müsstest du also a und b wählen?

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Wie müsstest du also a und b wählen?

Geht ja auch für den Adventskalender:

.adventskalender .türchen:not(:nth-of-type(n+1+$day)) {
  content: "none";
}

Bis demnächst
Matthias

[franzsen]

Hallo Gunnar!

Nach deiner Angabe wäre meiner Meinung nach jedes Element ab dem 3. Element selektiert.
„li:nth-child(1n + 3) {
margin 30px;
}“

[Tabellenkalk]

Hallo,

Nach deiner Angabe wäre meiner Meinung nach jedes Element ab dem 3. Element selektiert.
li:nth-child(1n + 3)

Was ungefähr ziemlich genau deiner Forderung

möchte ab der dritten Listenzeile alle einrücken.

entspricht!

Gruß
Kalk

[Matthias Apsel]

Hallo Tabellenkalk,

Nach deiner Angabe wäre meiner Meinung nach jedes Element ab dem 3. Element selektiert.
li:nth-child(1n + 3)

Was ungefähr ziemlich genau deiner Forderung

möchte ab der dritten Listenzeile alle einrücken.
entspricht!

also beginnend mit dem vierten.

Bis demnächst
Matthias

[marctrix]

Hej franzsen,

Ist es möglich einzelne Listenelemente einzurücken?

Ja, es ist möglich (siehe andere Antworten).

Wenn du aber keinen besonders ausgefallenen Anwendungsfall hast, wirst du deine Nutzer damit nur verwirren. Eine Einrückung wird als nächste Hierarchie-Stufe wahrgenommen. Wenn du so eine tatsächlich benötigst, solltest du mehrere Listen verschachteln.

Marc

[franzsen]

Nach längerer Zeit arbeite ich an meiner Homepage weiter. Diese möchte ich etwas ändern. Hier habe ich zwei Listen verschachtelt. Da ich aber eine Liste als eigene Seite gestalten werde, weil sie mehr oder weniger ein eigenes Kapitel darstellt, fällt diese Verschachteln weg. Diese abgetrennte Liste hat ein Listen-Element, das zwar Teil der Seite ist, aber die anderen Elemente sind eine eigene Gruppe.
Ich habe auch schon überlegt die Einrückung durch eine Verschachtelung zu bewerkstelligen. Eine weitere Überlegung wäre das erste Element als eigenständigen link zu schreiben und die anderen als Liste. Da alle Elemente eine einheitliche Formatierung haben, müßte ich für diesen einen link einen eigenen CSS-Code schreiben. Ich glaube, da verkürzt eher eine Verschachteln den Code. Das mit dem nth-Child war eine weitere Überlegung.

[marctrix]

Hej franzsen,

Ich habe auch schon überlegt die Einrückung durch eine Verschachtelung zu bewerkstelligen.

Ich glaube, da verkürzt eher eine Verschachteln den Code. Das mit dem nth-Child war eine weitere Überlegung.

Code sollte nicht kurz, sondern gut wartbar und verständlich sein. Aufgeblähter Code ist zwar nicht gut wartbar, aber das heißt nicht, dass um jeden Preis kurzer Code besser ist.

Was aber noch entscheidender ist: Listen werden nicht genutzt, weil diese eine Einrückung mitbringen. Listen nutzt man, wenn man etwas Aufzählen möchte. Verschachtelte Listen nutzt man immer, wenn es in der Aufzählung eine Hirarchie gibt. Um das Aussehen kümmert man sich später per CSS. Kein Mensch ist mit dem Standard-Aussehen der Elemente zufrieden (Ausnahmen bestätigen die Regel)

Der Vorteil von korrekt verwendetem HTML: es ist verständlich und bedienbar. Alles andere nicht. Das gilt auch für Sehende. Deine Seite sollte noch bedienbar sein, wenn das CSS mal nicht zur Verfügung steht. Dann freut sich der Mensch über die Standard-Darstellung von Listen — aber nur wenn du diese wirklich nur für Aufzählungen verwendest!

Marc

[Gunnar Bittersmann]

@@franzsen

Ich habe mal eine Spielwiese für :nth-child() gemacht.

Übrigens ist :nth-of-type() oft besser geeignet als :nth-child().

LLAP 🖖

[einsiedler]

Hmmmmmm .... sehr hübsch ...

Best einsiedler