Probleme mit Abständen (nth-child)

[Rene3.1]

Hallo,

ich würde gerne nur die <article>-Elemente (minimum: 1, maximum: 2) in der letzten Reihe ansprechen.

Mit dieser Methode wird jedoch leider auch das vorletzte Element in der vorletzten Reihe angesprochen, wenn sich in der letzten Reihe nur 1 <article>-Element befindet. Leider reicht es nicht, dass nur das letzte Element angesprochen wird, weil diese unterschiedliche Höhen haben und nur dies nur für das höhere übernommen wird.

Kann mir vielleicht jemand mit meinen Problem helfen? Danke schonmal im Voraus!

	article {
  width: calc(50% - 62.5px);
	margin-bottom: 25px;
  padding: 25px;
  float: left;
  display: table-cell;
	line-height: 22px;
	border-radius: 10px;
	background: rgb(245,248,250);
	}

		article:nth-last-child(2), article:last-child {
		margin-bottom: 0;
		}

<section>
  <article>
    <p>Text</p> <br>
    <img src="">
  </article>

  <article>
    <p>Text</p>
  </article>

  <article>
    <p>Text</p> <br>
    <img src="">
  </article>

  <article>
    <p>Text</p> <br>
    <img src="">
  </article>
</section>

[Gunnar Bittersmann]

@@Rene3.1

ich würde gerne nur die <article>-Elemente (minimum: 1, maximum: 2) in der letzten Reihe ansprechen.

In einer Reihe stehen bei dir ein oder zwei Elemente. Bei einer geraden Gesamtzahl an Elementen ist die letzte Reihe mit zwei Elementen gefüllt; bei einer ungeraden Gesamtzahl steht in der letzten Reihe nur ein Element.

Du willst also bei gerader Gesamtzahl die letzten beiden Elemente selektieren; bei ungerader Gesamtzahl nur das letzte. Anders gesagt: Du willst immer das letzte Element selektieren und bei gerader Gesamtzahl zusätzlich noch das vorletzte.

Noch anders gesagt: Du willst das letzte Element selektieren sowie das vorletzte, wenn dieses ein ungerades Element ist. Das kann man mit Selektoren machen:

article:last-child, article:nth-last-child(2):nth-child(odd)

Statt …-child auch gern …-of-type.

Mehr dazu in Quantity Queries for CSS von Heydon Pickering auf A List Apart.

---

Aber eigentlich willst du etwas ganz anderes: Den Kram mit Floats sein lassen und Flexbox oder CSS Grid verwenden.

Nachtrag: Beispiel Flexbox vs. Grid

LLAP 🖖

[Rene3.1]

Vielen Dank, funktioniert super :)

Zum Nachtrag: Werde demnächst eh mal umstellen ;)

[marctrix]

Hej Rene3.1,

Vielen Dank, funktioniert super :)

Zum Nachtrag: Werde demnächst eh mal umstellen ;)

Demnächst ist nur ein anderes Wort für niemals…

Marc

[marctrix]

Hej Gunnar,

Mehr dazu in Quantity Queries for CSS von Heydon Pickering auf A List Apart.

Ja, er hat jetzt auch drüber geschrieben. Zuerst habe ich das bei Lea Verou gesehen (wow - ist schon wieder (fast) 7 Jahre her…)

Styling elements based on sibling count

Aber eigentlich willst du etwas ganz anderes: Den Kram mit Floats sein lassen und Flexbox oder CSS Grid verwenden.

Nachtrag: Beispiel Flexbox vs. Grid

Sehe ich genauso. Lea würde heute auch keine Geschwister mehr zählen, um die Breite von Elementen festzulegen…

Marc

[Gunnar Bittersmann]

@@marctrix

Mehr dazu in Quantity Queries for CSS von Heydon Pickering auf A List Apart.

Ja, er hat jetzt auch drüber geschrieben.

Vor fast drei Jahren … „Jetzt“ ist ein ziemlich dehnbarer Begriff.

Zuerst habe ich das bei Lea Verou gesehen (wow - ist schon wieder (fast) 7 Jahre her…)

Pah, Lea! Gehen wir ruhig noch ein paar Monate zurück – einer der wenigen Momente, in denen ich hier mal klüger sein durfte als Cheatah. 😏

LLAP 🖖

[marctrix]

Hej Gunnar,

Zuerst habe ich das bei Lea Verou gesehen (wow - ist schon wieder (fast) 7 Jahre her…)

Pah, Lea! Gehen wir ruhig noch ein paar Monate zurück – einer der wenigen Momente, in denen ich hier mal klüger sein durfte als Cheatah. 😏

Hehe - allerdings weiß ich nicht, ob das die früheste Quelle ist. Habe da nciht wirklich nach gesucht, wusste nur, dass ich da schon vor Jahren was drüber gelesen habe. Allerdings habe ich es bisher nicht ein einziges Mal benötigt.

In aller Regel sind es funktionale Entscheidungen die getroffen werden müssen, wenn sich das Layout ändern soll. Das sollte sich auch im HTML niederschlagen aufgrund von anderen Elementen und/oder anderen Klassen.

Damit will ich nicht sagen, dass es keine Anwendungsfälle gibt — mir scheint nur, dass sie sehr selten vorkommen.

Marc