Probleme mit PhP inclutions

[Gunnar Bittersmann]

@@Rolf B

a:nth-of-type(n+2) besagt: gib den a Elementen ab Nummer 2 diesen Style.

Das wäre die zweitbeste Umsetzung. Alle a-Elemente außer Nummer kann man so selektieren: a:not(:first-child) (a:not(:first-of-type)) – das ist sprechender Code und erspart die Überlegungen, wie :nth-child() (:nth-of-type()) nun genau funktioniert.

Wegen des Whitespaces zwischen den a-Elementen ist der Strich bei dir nicht in der Mitte zwischen den Links. Das bekommt man hin, indem man die a-Elemente zu Flex-Items macht, d.h. den footer zur Flexbox: footer { display: flex }.

Da man aber nicht wissen kann, ob alle a-Elemente in eine Zeile passen, sollte man den Umbruch erlauben: flex-wrap: wrap oder flex-flow: row wrap.

Un wenn sie dann umbrechen, sieht es vermutlich blöd aus, wenn die Zeilen ab der zweiten mit dem Trennstrich beginnen. Also diesen nicht als border-left für alle außer dem ersten Element, sondern als border-right für alle außer dem letzten (bei Schreibrichtung von links nach rechts).

Durch negativen margin gleichen Betrags wie das horizontale padding kann man die Elemente wieder an den Rand rücken. Sieht dann so aus (Codepen):

footer
{
	display: flex;
	flex-flow: row wrap;
	margin-left: -0.5em;
	margin-right: -0.5em;
}

footer a
{
	padding: 0 0.5em;
}

footer a:not(:last-child)
{
	border-right: thin solid;
}

LLAP 🖖