Zwei Klassen einem Div-Tag zuweisen

KasselJulian · 05.11.2012

Hallo,

ich habe einen Div-Tag mit zwei gegebenen Klassen. Beide enthalten einen Border-Befehl und ich möchte, dass die letzt aufgerufene Klasse angenommen wird, sprich in meinem Beispiel von .weed der Border angenommen wird. Wie kann ich CSS klarmachen, dass er .weed der davor genannten Klasse bevorzugen soll? (Wie z-index nur im backend

)

LG

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
.weed{
    border:1px solid red;    
}
.helloworld{
    border:1px solid blue;    
}
</style>
</head>
<body>
<div class="helloworld weed">
    <div id="calculate_schranktiefe">asdasdasdasdadasdasd</div>
</div>
</body>
</html>

Myhar · 05.11.2012

AW: Zwei Klassen einem Div-Tag zuweisen

Indem du die weed Klasse nachher im CSS definierst.

Code:

.helloworld{}
.weed{/*Diese Stile werden die von helloworld überschreiben.*/}

KasselJulian · 05.11.2012

AW: Zwei Klassen einem Div-Tag zuweisen

Myhar schrieb:
Indem du die weed Klasse nachher im CSS definierst.

Code:

.helloworld{} .weed{/*Diese Stile werden die von helloworld überschreiben.*/}

cool danke

Wusste garnicht das CSS Wert auf Reihenfolgen legt. Bei der objektorientierten Zuweisung von Eigenschaften war es ja bisher auch nicht relevant.

KasselJulian · 05.11.2012

AW: Zwei Klassen einem Div-Tag zuweisen

Myhar schrieb:
Indem du die weed Klasse nachher im CSS definierst.

Code:

.helloworld{} .weed{/*Diese Stile werden die von helloworld überschreiben.*/}

Und wie siehts hier aus? Div bleibt blau obwohl ich 1. in der CSS die Klasse weed später gesetzt habe und 2. die Referenzierung direkt auf dem Div liegt.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
.helloworld div{
    border:1px solid blue;    
}
.weed{
    border:1px solid red;    
}
</style>
</head>
<body>
<div class="helloworld">
    <div class="weed">asdasdasdasdadasdasd</div>
</div>
</body>
</html>

Myhar · 05.11.2012

AW: Zwei Klassen einem Div-Tag zuweisen

Du solltest dich mit der grundlegenden Syntax von CSS einmal beschäftigen.
Das C in CSS steht für Cascading.
Wenn man die definition davon weiß (A process whereby something, typically information or knowledge, is successively passed on), dann weiß man, dass es hierarchisch aufgebaut ist. Also stärkere Definitionen überschreiben schwächere. Eine Klasse hat hierbei eine höhere Gewichtung wie ein Element (a, div, ul, ...), eine ID hat jedoch die höchste Gewichtung.
Du hast in deinem ersten CSS Befehl Klasse und Element, in deinem zweiten Beispiel nur eine Klasse angegeben. Klasse + Element ist mehr als nur Klasse, demzufolge wird die Kombination von Klasse + Element verwendet.
Um dein Problem zu lösen musst du deine Selektoren also in der Gewichtung aneinander anpassen. Das sind aber Grundlagen, welche ich hier nicht erneut wiederholen will.

Also weniger weed rauchen und mehr lernen

(scnr)

TheCuda · 06.11.2012

AW: Zwei Klassen einem Div-Tag zuweisen

Es gibt auch noch die kleine, nützliche Angabe "!important", die den meisten modernen Browsern sagt, dass die Styleangabe, die davor steht, am wichtigsten ist und entsprechend verwendet werden soll (z.B. border: 1px solid black !important

.

Generell hat Myhar aber Recht, dass die Gewichtung der Selektoren entsprechend aufgebaut werden sollte, um sauberes CSS zu haben.

Myhar · 06.11.2012

AW: Zwei Klassen einem Div-Tag zuweisen

Die ist nur bedingt nützlich, da sie, wenn sie von Anfängern, welche keine konkrete Ahnung davon haben, benutzt wird, mehr Fehler bringt, als sie behebt. Um die !important Anweisung zu überschreiben, muss man das Grundprinzip von CSS trotzdem beherrschen, es bleibt einem also nicht erspart, es zu lernen. Außer, man möchte keine Site mit Styles haben