CSS: verschachtelte Klassen

LinuxMan

fällt das eigentlich noch unter verschachtelte Klassen?

Folgendes geht ja mit Individualformaten:

Code

div#txtBox { margin:0; }


div#txtBox p {margin:8px; }

Wenn ich sowas aber mit Klassen formatieren will übernimmt das Element p einfach nicht die CSS-Angaben, wie in diesem Beispiel:

Code

div.txtBox { margin:0 0 8px 0; padding:0; overflow:auto; }


div.txtBox p { margin:0; padding:8px; text-align:justify; font-size:0.8em; }

Was ist daran falsch?

sudeki05

Was ist denn:
margin:0 0 8px 0;

für eine Angabe?

Dodo

zeig uns mal den HTML-Code dazu

@sudeki:
oben: 0;
rechts: 0;
unten: 8px;
links: 0;

LinuxMan

Ist nicht ganz so einfach. Der HTML-Code findet sich auf diversen Unterseiten wieder. Etwa nach diesem beispielhaften Schema:

Code

<div class="txtBox"><h1>Titel des Themas der Seite</h1>


<div id="bannTopWide">
[url='ziel.url'][img]http://url.xyz[/img][/url]</div>








Seiteninhalt 1. Absatz</p>






Seiteninhalt 2. Absatz</p>


<div class="textLink">
<a href="ziel.url">
zum Ziel</a>
</div>


....
weitere Absätze und Textlinks
....
</div>


<div class="txtBox"><h1>Überschrift 2. Text Box</h1>


....
code aller art
....


</div>

Alles anzeigen

sejuma

Es gibt eine "Spezifität der Selektoren":
http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet
Danach haben ID's eine höhere Gewichtung als Klassen.
Deshalb schlagen die vor einem ID geöffneten Klassen nicht durch.

Es macht auch deshalb m.E. keinen Sinn, einen ID in eine Klasse zu setzen.
Eher umgekehrt.

Zitat

div#txtBox { margin:0; }

Ein solcher ID oder eine Klasse mit dem Alleinmerkmal

Code

margin: 0;

ist ebenfalls unnötig, weil dies bereits der Standardvorgabe entspricht.

LinuxMan

Zitat von sejuma

Es gibt eine "Spezifität der Selektoren":
Danach haben ID's eine höhere Gewichtung als Klassen.

Also soweit ich das überblicke spielt das nur dann eine Rolle, wenn ich das selbe HTML-Element mehrmals deklariere. Das Element p ist innerhalb der Klasse .txtBox aber nur einmal mit CSS-Formaten versehen worden.

Zitat von sejuma
Ein solcher ID oder eine Klasse mit dem Alleinmerkmal
Code
margin: 0;
ist ebenfalls unnötig, weil dies bereits der Standardvorgabe entspricht.

Das hatte ich nur beispielhaft so dargestellt. Neben margin enthält die txtBox noch eine Reihe weiterer Formatangaben, die aber nicht relevant sind.

Habe übrigens den Fehler gefunden. War meine eigene Schusseligkeit. Ich hatte vorhin mein Website-Projekt in einen neuen Ordner kopiert, der dann eine neue Versionsnummer bekam und hatte vergessen im init-Skript die Versionsnummer zu aktualisieren. Die veränderten HTML-Seiten waren noch mit der alten CSS-Datei verknüpft. Logisch das es dann nicht richtig funzt. Nun geht es so, wie ursprünglich gedacht.

Danke für alle Lösungsvorschläge.

pinales

Tach!

IDs (in css: #abc) werden lediglich für Elemente eingesetzt, die nur einmal in einem HTML-Dokument vorkommen (z. B. der Außenrahmen <div> einer Seite). Dagegen kann eine Klasse (in css: .xyz) mehrfach je HTML-Dokument eingesetzt werden (z. B. für Absätze

, Links <a href>, ...).

Wenn Du dich daran orientierst, kann es kaum vorkommen, dass sich Definitionen gegenseitig aufheben oder stören.

Wenn Elemente (z. B. ein Absatz) in unterschiedlichen Seitenbereichen anders dargestellt werden soll, dann kann das Aussehen des Absatzes mit einer übergeordneten ID (z. B. umgebendes <div>) verbunden werden:

Code

p { /*Standardabsatz*/
font-size: 13px;
}


#news p { /*Absatz in einem umgebenden <div id=news>*/
font-size: 10px;
}

Tags