CSS first-child

[bleumi85]

Hi. Ich bin gerade dabei mir ein wenig CSS beizubringen und scheitere jetzt an first-child und last-child. Eigentlich hab ich einen ganz simplen Aufbau der wie folgt aussieht:

<nav id="Main">
		<ul>
			<a href="#"><li>Punkt 1</li></a>
			<a href="#"><li>Punkt 2</li></a>
			<li>Punkt 3
				<ul>
					<a href="#"><li>Punkt 3.1</li></a>
					<a href="#"><li>Punkt 3.2</li></a>
					<a href="#"><li>Punkt 3.3</li></a>
					<a href="#"><li>Punkt 3.4</li></a>
				</ul>
			</li>
			<a href="#"><li>Punkt 4</li></a>
			<a href="#"><li>Punkt 5</li></a>
		</ul>
	</nav>

Jetzt würde ich gerne über last-child den "Punkt 5" in meiner Liste ansprechen und ihm einen Background geben. Aber was ich auch tue, alle anderen Punkte (außer Punkt 3) färben sich auch. Hat jemand eine Idee für mich?

Mein CSS-Code sieht wie folgt aus:

#Main ul li:last-child{
	background:red;
}

[Auge]

Hallo

… Eigentlich hab ich einen ganz simplen Aufbau der wie folgt aussieht:

… und falsch ist.

Einel Liste ul (oder auch ol für eine geordnete Liste) darf selbst nur li als Kindelemente haben. Du hast direkt Links a als Kindelemente von ul (und dort herinnen die li). Die Browser sehen zwar gnädig über solche Fehler hinweg. da sie das aber nicht alle auf die selbe Art tun, also kein Verlass auf ein gleichartiges Verhalten ist, ist die richtige Verwendung der Elemente Pflicht.

Die korrekte Verschachtelung (ausschnittsweise) ist folgende:

<nav>
 <ul>
  <li><a href="">Punkt 1</a></li>
  <li>Punkt 3
   <ul>
    <li><a href="#">Punkt 3.1</a></li>
   </ul>
  </li>
 </ul>
</nav>

Jetzt würde ich gerne über last-child den "Punkt 5" in meiner Liste ansprechen und ihm einen Background geben. Aber was ich auch tue, alle anderen Punkte (außer Punkt 3) färben sich auch. Hat jemand eine Idee für mich?

mit dem korrekten Aufbau des HTML-Quelltextes sollte dein CSS funktionieren. Falls du nur ein nav hast oder mehrere solche Blöcke gleichartig gestaltet oder z.B. zusätzlich per JS angesprochen werden sollen, brauchst du die ID dort nicht. Dann würde auch nav li:last-child reichen.

#Main ul li:last-child{
	background:red;
}

Tschö, Auge

[Tabellenkalk]

Hallo,

mit dem korrekten Aufbau des HTML-Quelltextes sollte dein CSS funktionieren.

nö, es soll ja nur Punkt 5 selektiert werden, das angegebene CSS selektiert auch Punkt 3.4. Es müssen also auch entsprechende Kombinatoren (direktes Elternteil) verwendet werden, so dass das vorgeschlagene Weglassen von ul im Selektor nicht zielführend ist.

Gruß
Kalk

[Auge]

Hallo

mit dem korrekten Aufbau des HTML-Quelltextes sollte dein CSS funktionieren.

nö, es soll ja nur Punkt 5 selektiert werden, das angegebene CSS selektiert auch Punkt 3.4. Es müssen also auch entsprechende Kombinatoren (direktes Elternteil) verwendet werden, so dass das vorgeschlagene Weglassen von ul im Selektor nicht zielführend ist.

Das war bloß ein (zugegebenermaßen verkürzter) Vorschlag für den nach dem Ende des Zitats beschriebenen Fall, dass die ID weggelassen werden kann. Wenn, wie der OP schrieb, ausschließlich Punkt 5 der Hauptliste selektiert werden soll, passt der von dir nicht zitierte Selektor nav li:last-child nicht.

Tschö, Auge

[bleumi85]

Danke für die schnelle Antwort. Ich hatte mir sowas schon gedacht und hab es jetzt auch andersrum probiert. Problem jetzt ist allerdings, wenn ich über einen dieser Menüpunkte hovern möchte dann färbt sich der Text nur dann wenn man exakt über den Text geht. Oder gibt es da auch eine nette Lösung?

[Vollzitat entfernt]

[JürgenB]

Hallo,

… Problem jetzt ist allerdings, wenn ich über einen dieser Menüpunkte hovern möchte dann färbt sich der Text nur dann wenn man exakt über den Text geht. Oder gibt es da auch eine nette Lösung?

probier mal, den Links ein display: inline-block zu geben, dann solten sie die ganze Fläche des LIs ausfüllen.

Gruß
Jürgen

[Tabellenkalk]

Hallo,

probier mal, den Links ein display: inline-block zu geben, dann solten sie die ganze Fläche des LIs ausfüllen.

Sollten sie das? Geht bei mir nur, wenn ich display: block verwende.
Ich hätte mit padding:... rumprobiert.

Gruß
Kalk

[Auge]

Hallo

Danke für die schnelle Antwort. Ich hatte mir sowas schon gedacht und hab es jetzt auch andersrum probiert. Problem jetzt ist allerdings, wenn ich über einen dieser Menüpunkte hovern möchte dann färbt sich der Text nur dann wenn man exakt über den Text geht. Oder gibt es da auch eine nette Lösung?

Ja, natürlich. Ein Link ist ein Inline-Element, dessen Dimension durch seinen Inhalt bestimmt wird, also wird auch nur dann gehovert, wenn du dich über dem die Größe bestimmenden Inhalt befindest. Du kannst den Links aber mit display: inline-block; oder bei Bedarf mit display: block; den benötigten Typ zuweisen, womit du sie wie Blockelemente dimensionieren kannst. Welchen Typ du brauchst, kommt auf die konkreten Anforderungen an.

Als Beispiel zum experimentieren:

nav li a {
  display: block;
  width: 14em;
  /* oder für den Fall, dass die Breite des Menüs mit einem
     der Elternelemente festgelegt wurde, width: 100%; (o.Ä.) */
}

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Einel Liste ul (oder auch ol für eine geordnete Liste) darf selbst nur li als Kindelemente haben.

Nicht nur. Auch script-supporting elements. [HTML]

Die Browser sehen zwar gnädig über solche Fehler hinweg. da sie das aber nicht alle auf die selbe Art tun, also kein Verlass auf ein gleichartiges Verhalten ist, …

HTML5 definiert einen Parser, d.h. dass die Verarbeitung von HTML-Quelltext – auch von fehlerhaftem – genau festgelegt ist. Neuere Browser sollten sich also gleich verhalten.

LLAP 🖖

[bleumi85]

Vielen Dank für die vielen und schnellen Antworten,

leider bin ich was das hovern angeht immer noch nicht am Ziel, aber irgendwie werde ich schon noch eine Lösung finden. Vielleicht ist mein grundsätzlicher Aufbau auch irgendwie falsch.

Mein HTML-Teil sieht aktuell wie folgt aus:

<body>
	<nav>
		<ul>
			<li><a href="#" class="active">Home</a></li>
			<li><a href="#">Kontakt</a></li>
			<li><a href="#">bla bla</a></li>
			<li><a href="#">Bilder</a></li>
			<li><a href="#">Videos</a></li>
		</ul>
	</nav>
</body>

Und das hier wäre die zugehörige CSS:

body{
	font-size:100%;
	margin:0em;
	padding:0em;
	width:70%;
	left:15%;
	top:4em;
	position:absolute;
}

nav{
	width:100%;
	height:3em;
}

nav ul{
	margin:0em;
	padding:0em;
}

nav ul li{
	position:relative;
	display:block;
	float:left;
	list-style:none;
	height:1.5em;
	background-image:linear-gradient(#46c182 15%, #00a652 100%);
	text-align:center;
	margin-right:0.3em;
	padding:0.6em 1em 0.9em 1em;
	border-radius:0.5em 0.5em 0 0;
}

nav ul li a{
	text-decoration:none;
	color:white;
	font-size:1.5em;
}

nav ul li a.active{
	background:white;
        color:black;
}

Es bleibt aber dabei, dass das aktive li-Element nicht vollständig gefärbt wird sondern eben nur der Text und sein Hintergrund. Was genau ich da falsch angehe versteh ich selber nicht.

[Vollzitat entfernt]

[Matthias Apsel]

Hallo bleumi85,

nav ul li a{
	text-decoration:none;
	color:white;
	font-size:1.5em;
}

nav ul li a.active{
	background:white;
        color:black;
}

Es bleibt aber dabei, dass das aktive li-Element nicht vollständig gefärbt wird sondern eben nur der Text und sein Hintergrund. Was genau ich da falsch angehe versteh ich selber nicht.

Du formatierst a-Elemente, keine li-Elemente. Abhilfe könnte schaffen, den a-Elementen ein display: block zu geben.

Bis demnächst
Matthias

[MudGuard]

Hi,

Du formatierst a-Elemente, keine li-Elemente. Abhilfe könnte schaffen, den a-Elementen ein display: block zu geben.

Das hätte den angenehmen Nebeneffekt, daß auch nicht mehr nur der Text anklickbar ist, sondern der gesamte Bereich innerhalb des li.

cu,
Andreas a/k/a MudGuard