✔ CSS-Klassen (Rangordnung)

[Budman]

Hallo!

Klingt durchaus logisch. Das stört mich auch im DW. Andereseits weiss ich meine Klassen auswendig (meistens ) und mit dem Anfangsbuchstaben springt DW auf die passende Klasse (sobald das Fensterchen kommt den Anfangsbuchstaben der Klasse eingeben).

Bei mir war es die Klasse mit nur einem geschützten Begriff (div.td.body). Aber das ist auch ein selten dämlicher Fehler meinerseits gewesen, zugegeben! Seitdem bin ich immer etwas vorsichtig mit gleichlautenden Namen und geschützten Begriffen. Aber das ist wahrscheinlich auch nicht wirklich notwendig.

Gruss

 

[hpvw]

@hpvw
Da hast Du völlig Recht. Das sollte auch nicht als Kritik an Dir gemeint sein. Ich hoffe, das kam auch so an!

Das kam nicht als Kritik an. Ich habe etwas dazugelernt, was ich mir bisher nicht bewusst gemacht habe, da mir noch keine "Fehler" aufgefallen sind.

Noch was zur Priorität:
Es gibt noch die "!important"-Regel.
Aber IMHO verbietet sich die Anwendung dieser Regel durch Webdesigner.

 

[Gumbo]

Das Schlüsselwort !important sollte von Autoren nicht benutzt werden um die Wichtigkeit einer Eigenschaft zu betonen, da dieses Schlüsselwort bevorzugt von den Nutzern in sog. User Stylesheets verwendet wird, um unpassende Eigenschaften durch selbstdefinierte zu ersetzen bzw. zu überschreiben.

 

[hpvw]

Das Schlüsselwort !important sollte von Autoren nicht benutzt werden um die Wichtigkeit einer Eigenschaft zu betonen, da dieses Schlüsselwort bevorzugt von den Nutzern in sog. User Stylesheets verwendet wird, um unpassende Eigenschaften durch selbstdefinierte zu ersetzen bzw. zu überschreiben.

Sag ich doch auch?

Habe übrigends noch etwas entdeckt, wo die Reihenfolge wichtig ist:

<style type="text/css" media="all">
    #navileiste {background:#eee; border:1px #222 solid;}
    //weitere css-Eigenschaften
</style>
<style type="text/css" media="print">
    #navileiste {display:none;}
    //weitere css-Eigenschaften kann man sich zum Teil sparen.
</style>

Der Code funktioniert nicht, wenn man die beiden Stylesheetbereiche vertauscht.

Gruß hpvw

 

[Gumbo]

Dann benutzt du wahrscheinlich einen schlechten Browser, denn das Element mit der Indentifikationsbezeichnung navileiste darf nur in dem Medium print ausgeblendet sein – egal welche Reihenfolge.

 

[hpvw]

Das die Eigenschaften bei media=print nur für den Drucker gelten ist schon klar, aber wenn man es in der falschen Reihenfolge macht, wird es nicht ausgeblendet, da es von der Definition (die ich natürlich klugerweise vergessen habe :-( ) in media=all überschrieben wird.
Es hätte so aussehen sollen:

<style type="text/css" media="all">  
    #navileiste {display:block; background:#eee; border:1px #222 solid;} 
    //weitere css-Eigenschaften 
</style> 
<style type="text/css" media="print">  
    #navileiste {display:none;} 
    //weitere css-Eigenschaften kann man sich zum Teil sparen. 
</style>

Und so würde es nicht funktionieren:

<style type="text/css" media="print">  
    #navileiste {display:none;} 
    //weitere css-Eigenschaften kann man sich zum Teil sparen. 
</style>
<style type="text/css" media="all">  
    #navileiste {display:block; background:#eee; border:1px #222 solid;} 
    //weitere css-Eigenschaften 
</style>

Man kann statt media=all auch media=screen verwenden, aber dann muss man vieles, wie z.B. für p oder h1-6 etc. doppelt schreiben. Dann wäre die Reihenfolge in der Tat egal.

 

[Gumbo]

Das halte ich aber für keine bedeutsame Entdeckung, denn in CSS deklariert man erst das Allgemeine und dann das Spezielle. So kann es garnicht zu Konflikten kommen.

 

[hpvw]

Du hast recht, natürlich ist das keine bedeutsame Entdeckung, aber gut zu wissen.
Ich habe bisher ja auch immer in der "richtigen" Reihenfolge definiert und nun in diesem Thread gelernt, dass es nicht immer nötig ist.
Damit das aber keiner für allgemein gültig hält und am Ende bei so einer Definition auf dem Schlauch steht, habe ich noch einmal ein Beispiel angeführt, bei dem die Reihenfolge wichtig ist.
Klassen gehen ja scheinbar unabhängig von der Reihenfolge der Definition vor allgemeine Definitionen eines HTML-Elements, ebenso, Definitionen, die über die ID gemacht werden.
Aber das speziellere Medium geht nur vor, wenn es nach dem allgemeinen Medium definiert ist.
[DEL]
Und wenn man ID und class mischt, kommt es darauf an, in welcher Reihenfolge man die Attribute im HTML-Element definiert.
[/DEL]
[INS]
Die korrekte Antwort steht in Gumbo's nächstem Post. Der Code ist mittlerweile korrigiert.
[/INS]
Hierzu noch ein Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
        <meta http-equiv="Content-Type"
            content="application/xhtml+xml; charset=UTF-8" />
        <title></title>
        <style type="text/css" media="all">
            #rot2 {background:#f00;}
            .blau {background:#00f;}
            #rot {background:#f00;}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td class="blau" id="rot2">
                    .blau #rot
                </td>
                <td id="rot" class="blau">
                     #rot .blau
                </td>
            </tr>
        </table>
    </body>
</html>

[DEL]
Man kann im style-Bereich beliebig vertauschen, die erste Zelle ist immer rot, die zweite immer blau, solange in dem td-Tag die Attribute ihre Reihenfolge behalten.
[/DEL]
[INS]
Der Klassenselektor hat Vorrang, man darf sich beim Coden halt nicht vertippen.
Also ist auch hier die Reihenfolge egal.
[/INS]
Ist auch wieder keine geniale Erkenntnis, aber gut zu Wissen.
Im Zweifel sollte man also das Wichtigere später definieren.

Gruß hpvw

PS @Gumbo:
Ich habe mir mal Deine Seite fah-q.org angeschaut.
Gratulation, die ist genial, insbesondere die visited-Links mit dem Haken.
Aber woher kommt der Name?

 

[Gumbo]

Meines Wissens werden CSS-Eigenschaften des Identifikations-Selektor als wichtiger angesehen als welche des Klassen-Selektors. Wenn du den Elementen die korrekten Indentifikationsbezeichner zuweist wirst du es selbst feststellen.