CSS überschreibungsregel

synaptic

wie ist eigentlich bei css die überschreibungsregel respektive identifier mit id
und klasse??

also wird nen identifier mit einbezogen oder aussen vor gelassen?? oder umgekehrt??

ich hoff ihr versteht was ich meine, nen genaues beispiel hab ich akut net zu hand und zeit zum testen hab ich auch net
die info benötigt einer meiner arbeitskollegen!

sejuma

Vorausgesetzt, ich hab' dich richtig verstanden:
Klassen innerhalb eines div's (ID) überschreiben di Angaben des ID.
Enthält die Klasse keine Angaben zu einer Eigenschaft, schlägt die des ID durch, ggf. des body.

Grob gesagt:
Je mehr du von "außen" nach "innen" kommst im Strukturaufbau, um so spezieller werden die Angaben (so definiert).

synaptic

also gedankengang war das man ja im css-sheet einmal nen style für eine klasse und einmal für eine id vergeben kann und die frage ist halt welches davon stärker ist, also wie die auswirkungen sind.

angenommen ich hab nachher ein div mit id und class-angabe, wie verhält sich da der style und was wird überschrieben?
ist dann der zuletzt geschriebene style der gültige?

sejuma

Zitat

also gedankengang war das man ja im css-sheet einmal nen style für eine klasse und einmal für eine id vergeben kann und die frage ist halt welches davon stärker ist, also wie die auswirkungen sind.

Von der Wirkung her gibt es keine Priorität.
Ein ID darf je Seite nur einmal vorkommen. Somit sinnvoll für die einzelnen Bereiche wie Header, Navi, Content, Footer.
Klassen können je Seite mehrmals vorkommen. Du kannst z.B. eine Klasse mit roter Schrift definieren, die du dann mehfach auf einer Seite aufrufst.

Zitat

angenommen ich hab nachher ein div mit id und class-angabe, wie verhält sich da der style und was wird überschrieben?
ist dann der zuletzt geschriebene style der gültige?

Das hängt davon ab, an welcher Stelle der ID geschlossen wird und was er beinhaltet. Vielleicht wird es an diesem Beispiel deutlich:

Zitat

<div id="grün">
grüne Schrift

<div class="rot">
rote Schrift
</div

grüne Schrift
</div>

Zitat

<div id="grün">
grüne Schrift
</div>

<div class="rot">
rote Schrift
</div

Du kannst genauso und mit der gleichen Wirlkung einen div ID in einen anderen div ID setzen, vorausgesetzt er kommt nur einmal je Seite vor.

jojo87

Ich glaube er meint so was:

Code

<div id="roter_rahmen" class="blauer_rahmen">
Text
</div>

Code

div#roter_rahmen {
  border: 1px solid rot;
}


div.blauer_rahmen {
  border: 1px solid blau;
}

In diesem Falle wird der Rahmen blau, da die zuletzt gegebene Style-Rege l angewendet wird.

Gruß,
Jojo

synaptic

also jojo meint schon ungefähr des richtige.. liegt es aber jetzt am anwenden oder an der deklaration im stylesheet?

sejuma

Ehrlich gesagt, werd' ich aus deinen Fragen nicht schlau.
Hilft das weiter?
http://www.thestyleworks.de/basics/inheritance.shtml
http://www.css4you.de/wscss/css08.html

driver

ich tip mal drauf er meints so wie bei jojo.

is der rahmen des divs jetzt blau oder rot ?
würde sich das ändern wenn die id hinten steht ?

in dem beispiel is der rahmen ja blau.

aber isser blau weil die class im html hinten steht
oder weil die class in der css-definitioin nach der id kommt...

jojo87

weil die class im css nach der id definiert wird.
Es kommt auf die Reihenfolge im css an.

driver

also könnte man es auch so schreiben

Code

<div class="blauer_rahmen" id="roter_rahmen" >
Text
</div>

würde sich nichts ändern ?!!

jojo87

genau

koslowski

Tach auch,

wenn man jojos Codebeispiel und die entsprechende Formatierung zugrundelegt wird der Rahmen rot und nicht blau.

Es gibt nämlich noch so etwas wie "Spezifität" was da eine Rolle spielt.

Das ist so eine Art Punktesystem für Selektoren:
einfacher Typ-Selektor - p - 1 Punkt
Klasse - .blau - 10 Punkte
ID - #rot - 100 Punkte
Attribut style=""" - style="color:red;" - 1000 Punkte

Da eine ID 100 Punkte hat und eine Klasse nur 10 Punkte, gewinnt es und der Rahmen wird rot.

Probierts aus.

koslowski

DarkSyranus

Junges, probier doch mal was aus, wenn ihr es nicht wisst ...
Grundsätzlich gilt: ID hat mehr gewicht als Klasse.
Wer es mir nicht glaubt, kopiert folgenden Code!!

HTML

<html>
	<head>
		<style type="text/css">
			#testID
			{
				background-color: #00f;


			}


			.testCL
			{
				height: 100px;
				background-color: #f00;
			}


			#testID2
			{
				background-color: #00f;


			}


			.testCL2
			{
				height: 100px;
				background-color: #f00;
			}


			.testCL3
			{
				height: 100px;
				background-color: #f00;
			}


			#testID3
			{
				background-color: #00f;


			}


			.testCL4
			{
				height: 100px;
				background-color: #f00;
			}


			#testID4
			{
				background-color: #00f;


			}

		</style>
	</head>
	<body>
		<div id="testID" class="testCL"></div>


		<div class="testCL2" id="testID2"></div>


		<div id="testID3" class="testCL3"></div>


		<div class="testCL4" id="testID4"></div>
	</body>
</html>

Alles anzeigen

Ganz anders ist jedoch die Sache, wenn man mit !important arbeitet, aber das steht ja hier nicht zur Frage.

driver

so.. ich habs mal durchprobiert:

Code

.blau { border:1px solid #0000ff; }
#rot { border:1px solid #ff0000; }


<div id="rot" class="blau"></div>

rot

Code

#rot { border:1px solid #ff0000; }
.blau { border:1px solid #0000ff; }


<div id="rot" class="blau">

rot

Code

#rot { border:1px solid #ff0000; }
.blau { border:1px solid #0000ff; }


<div class="blau" id="rot">

rot

Code

.blau { border:1px solid #0000ff; }
#rot { border:1px solid #ff0000; }


<div class="blau" id="rot">

rot

Code

<div class="blau" id="rot" style="border:1px solid #000000;">

schwarz

somit hat koslowski ins schwarze getroffen

edit:..und ich war zu langsam

sejuma

Jetzt wird's ja interessant:

Das Beispiel von jojo ist insofern etwas schlecht, als Rahmen nicht vererbbar sind.
Sonst hätte jedes andere Element im div einen Rahmen:
http://www.css4you.de/wscss/css08.html#inherit

Zitat

aber isser blau weil die class im html hinten steht

Nein, hier hat der ID den Vorrang und der Rahmen ist rot.
Eine solche Konstruktion macht auch keinen Sinn. Entweder will man einen roten oder einen blauen Rahmen. Weshalb soll man da ID und Klasse mit unterschiedlichen Angaben kombinieren?

Zitat

oder weil die class in der css-definitioin nach der id kommt...

Nein, diese Reihenfolge spielt hier keine Rolle.
Lediglich bei a:link usw, hatten wir heute schon.

Jetzt probiert mal das aus:

Code

<style type="text/css">
.fettrot {
font-weight: bold;
color: #f00;
}


#normal {
color: #000;
}
</style>
</head>
<body>
<div id="normal" class="fettrot">
Text
</div>




<div class="fettrot" id="normal">
Text
</div>


<div id="normal">
normaler Text
<p class="fettrot">
fett-roter Text
</p>
</div>


</body>
</html>

Alles anzeigen

Variante 1:
Es schlägt nur die Fettschrift, nicht aber die Farbe der Klasse .fettrot durch.

Variante 2:
dto.

Variante 3:
So wird das in der Praxis gehandhabt:
Es gelten die Generalangaben des div.
Soll etwas anders gelten, wird es entsprechend deklariert, wie hier der Absatz.

Ich halte die Diskussion zwar interessant, aber dennoch für müßig bis sinnlos.
Weshalb soll man zwei Style-Deklarationen in Form von ID und class verwenden, wenn man als Ergebnis nur eines haben kann?

Warten wir aber mal ab, was elvis dazu zu sagen hat

Edit: jetzt hab ich soviel geschrieben, dass ich auch zu spät komme

synaptic

also das problem ist, dass wir mehrere teaser haben und dennoch nicht alle 100% gleich sind.... naja ich wollte auch eigentlich nicht sowas hier lostreten...
koslowski hat genau das geschrieben, was meine frage beantwortet hatte

und sorry sejuma, daß du zu spät unnerwechs bist

sejuma

Tja, man ist eben auch nicht mehr der Jüngste!

Dann stell doch einfach mal einen Link rein (wenn es denn soweit ist).
Konkret ist das an einem Beispiel immer besser zu beurteilen bzw. zu erklären.
Aber du sagtest es bereits: koslowski hat es auf den Punkt gebracht und alle haben wieder was gelernt.

synaptic

ja das mit dem link is so ne sache, ich weiß net wann des projekt online geht.. und grad hab ich dann auch noch erfahren, daß das eigentliche design noch gar nicht steht und das der kollege das falsche design bekommen hatte...
oh oh oh kommunikation is der schlüssel zur gesellschaft

Tags