CSS: verschachtelte Klassen

  • 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?

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

  • 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.

  • 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.

  • 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;
    }

    Viele Grüße!
    PINALES

    Rechtschreibung für alle!