Klasse mehrfach nutzen, ohne die Styles zu übernehmen

[Big-A]

Hallo Ihr Lieben,

ich habe eine Frage:

Wie kann ich eine Klasse z.B: navigation oder login usw.

mehrfach verwenden und eine Vererbung darauf unterbinden?

z.B

.menue .navigation {
color: green;
text-align: center;
}

und später möchte ich in einem anderen Bereich die Klasse verwenden, gebe aber nur die Klasse selber an

.navigation {
text-align: right;
backgroundcolor: blue; /*diese Werte sollen sich nicht auf die obere Klasse auswirken*/
}

Gibt es irgendeine Möglichkeit?

 

[ikosaeder]

Du kannst die Klassen einschränken, in dem du Kindselectoren verwendest.
also
.navigation{
background-color:red;
}
div.navigation{
color:green;
}
li.navigation{
color:blue;
}

http://jsfiddle.net/vgGB4/33/

 

[Stoffelchen]

Hallo Big-A,

die Variante von Ikosaeder erfordert die Verwendung von untergeordneten Elementen. Wenn du allerdings keine Kindelemente verwenden möchtest, hast du auch noch die Möglichkeit Klassen im Zusammenhang mit anderen Klassen zu verwenden, d.h. dass diese Klasse

div .menu.navigation { background: red; }

nur für diese Fall greift

<div class="menu navigation">...</div>

Auf diese Weise kannst du eine Standardformatierung für die .navigation Klasse erstellen

.navigation { font-weight: bold; }

sie aber auch an bestimmte Vorgaben binden, z.B.
wenn Hauptnavigation, dann blauer Text

.navigation.main { color: blue; }

wenn Footernavigation, dann unterstrichener Text

.navigation.footer { text-decoration: underline; }

Dein div-Element mit der Klasse .navigation hat trotz allem nur fetten und keinen blauen oder unterstrichenen Text.

Ich hoffe, ich konnte dir damit weiterhelfen

Lg Stoffelchen