✔ * Selektor verhindert "Vererbung"?

StehtimSchilf · 5. Juni 2010

Hi Forum

k.A. ob der Betreff mein Problem verdeutlich. Aber dazu ein Code:

Code:

<html>
<head>
<title>
</title>
	<style type="text/css">
		* {
			color: red;
		}
		
		#mydiv {
			color: green;
		}
	</style>
</head>

<body>
	<div id="mydiv">
		Ich bin grün!
		<span>Ich bin rot</span>
	</div>
</body>
</html>

Ich habe einen * - Selektor, damit alle Texte auf der Seite die gleiche Schriftart haben und "default"-mässig die gleiche Farbe etc. Nun habe ich ein DIV (mydiv) und in diesem DIV habe ich ein SPAN. Kann mir jemand verraten, wieso der Text im SPAN nicht "grün" kommt, wie im Parent-DIV deklariert? Ich find das voll doof, denn jetzt muss ich für alle unterschiedlichen SPANs in meinen DIVs wiederum Klassen machen, damit diese die gleichen Styles erhalten wie die Parent-DIVs:

Code:

mySpan {
   color: grün;
}

Ich hoffe ich konnte mein Problem verständlich ausdrücken! Habt 1000 Dank!

cheerioh Si"

Maik · 5. Juni 2010

Hi,

der Universalselektor * bezieht alle im HTML-Dokument enthaltenden Elemente ein, und mit deiner gezeigten Schreibweise der beiden Selektoren gilt er nunmal auch für das Nachfolgeelement <span> des <div>-Elements, und verhindert so die Vererbung seiner Formatierung.

Ergo muß hier die Spezifität / Gewichtung des zweiten Selektors erhöht werden:

CSS:

* {
	color: red;
}
		
#mydiv, #mydiv * { 
	color: green;
}

/* oder alternativ  */
#mydiv, #mydiv span { 
	color: green;
}

mfg Maik

✔ * Selektor verhindert "Vererbung"?

StehtimSchilf

Erfahrenes Mitglied

Maik

Neue Beiträge