✔ Priorität der Klassen / Überschreiben globaler Selektoren-Eigenschaften

[Mik3e]

Hi zusammen,

Ich habe ein kleines Problem mit den Klassen.
Es gibt einen DIV Selektor namens "contentcontainer". In diesm befindet sich (wie der Name schon verrät) der Inhalt der Seite. Definiert wird er über seine ID folgendermaßen:

/* Content Container / rechte Spalte
----------------------------------------------- */
div#contentcontainer {
	float:right;
	width:760px;
	_width:750px; /* IE Bugfix */
	margin:10px 10px 0px 0px;
	padding:0px 0px 0px 0px;
}

/* Tabellen im Contentcontainer
----------------------------------------------- */
div#contentcontainer table {
	border-style:solid;
	border-width:1px;
	border-color:#666666;
	margin:0px;
}

Wird also eine Tabelle in diesem Container erstellt, gibt es dazu auch schon die passenden attribute (border, etc.).

Nun ist es allerdings so, dass es in diesem Content-Container wieder andere DIVs geben kann, in denen wiederum eine Tabelle enthalten ist. Und diese möchte ich rahmenlos formatieren. Hierfür verwende ich Klassen, da pro Dokument natürlich meherere Tabellen vorkommen können:

/* Newsbox
----------------------------------------------- */
div.newsbox1 {
	background-color:#F2F2F2;
	border-style:solid;
	border-width:1px;
	border-color:#B5AEB5;
	padding:6px 10px 6px 10px;
}

div.newsbox1 table {
	border-style:none;
	border-width:0px;
	background-color:#FF0000;
}

Hier sieht man, dass Tabellen, die sich innerhalb des DIVs "newsbox1" befinden (der sich wiederum innerhalb des contentcontainer befindet), OHNE Rahmen dargestellt werden sollen.

Das interessante dabei: Die Browser weisen der Tabelle sehr wohl den richtigen Style zu, da die Hintergrundfarbe (wie testweise angegeben) auf rot geändert wird. Der Rahmen jedoch verschwindet nicht.

Ich befürchte, dass die Zuweisung einer ID die einer Klasse überlagert (höher priorisiert ist). Denn wenn ich für die innere Tabelle in der Newsbox anstatt einer Klasse eine ID verwende, funktionierts.

Hat irgendjemand einen Plan, wie ich dieses Problem lösen kann? (also das ich bei Klassen bleibe und der Rahmen verschwindet!?).

Danke & Ciao,
Mike

 

[Maik]

Du kannst zum einen den Selektor erweitern:

div#contentcontainer div.newsbox1 table {
	border-style:none;
	border-width:0px;
	background-color:#FF0000;
}

oder zum anderen die !important-Regel einsetzen:

div.newsbox1 table {
        border-style:none !important; /* Für moderne Browser */
        border-width:0px; /* Für IE */
        background-color:#FF0000;
}

 

[Mik3e]

Dankeschön.. An diese Kaskadierung hatte ich nicht gedacht..:-(
Zu Important!:
Meines Wissens nach dient das ja nur dazu, höherwertige Stylesheets, die evtl. den selben Bezeichner verwenden, zu überlagern (also Browserstylsheets, Benutzerstylesheets).
Siehe: http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=important!

Oder gilt das auch innerhalb eines Stylesheets? (so wie in meinem Beispiel)?

Ciao,
Mike

 

[Maik]

Wie das Lösungsbeispiel zeigt, lässt sich die !important-Regel auch innerhalb eines Stylesheets nutzen, um die "geerbte" Regel eines Elternelements wieder zu überschreiben, in diesem Fall den Tabellenrahmen aus dem Selektor div#contentcontainer table.