✔ Horizontales Menü - HTML5/CSS - Pseudoelement funktioniert nicht

[dwex]

Hallo Leute,

ich verzweifle gerade wieder mal und komme nicht auf den Fehler.

Ich möchte ein horizontales Menü (nur eine Ebene) machen.
Das erste Button möchte ich anders formatieren wie die andern und das NICHT über eine Klasse lösen.
Dazu hätte ich versucht das ganze über das Pseudoklasse first-child zu regeln.

Hier mal mein Code:

<div id="hauptnavigation">
	<ul>
		<a href="#"><li>Seite 1</li></a>
		<a href="#"><li>Seite 2</li></a>
		<a href="#"><li>Seite 3</li></a>
		<a href="#"><li>Seite 4</li></a>
		<a href="#"><li>Seite 5</li></a>
	</ul>
</div>

und das CSS dazu:

#hauptnavigation {
	position: absolute;
	top: 55px;
	left: 20px;
	right: 20px;
	height: 30px;
	padding: 0;
	margin: 0;
}

#hauptnavigation ul {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style: none;
}

#hauptnavigation ul li {
	float: left;
	padding: 4px 20px;
	background-color: rgb(168,8,34);
	color: white;
}

#hauptnavigation ul li:first-child {
	background-color: green;
}

Wie Ihr seht sollte eigentlich meine Navigation rot sein und das erste Button grün.
Leider sind aber alle Buttons grün wenn ich das Pseudoklasse einfüge.

Kann mir bitte jemand helfen - vielleicht sehe ich den Wald ja vor lauter Bäumen nicht.
Vielen Dank für eure Mühe.

 

[hela]

... sollte eigentlich meine Navigation rot sein und das erste Button grün.

Hallo,

alle LI-Elemente sind ja auch das erste Kind des A-Elements.
Warum setzt du nicht das A-Element in das LI-Element? Dann wäre es auch valide, denn m.E. darf auch in HTML5 im UL-Element nur LI-Elemente als Kind stehen.

 

[dwex]

Hallo hela,

danke für die Info.
Jetzt funktioniert es.