CSS Selector: Class und ID zusammen

[Julexander]

Hi,
ist es moeglich bei einem selector gleichzeitig eine class und eine id zu erstellen, zb bei einer Liste:

<ul>
<li class="active" id="de">Deutschland</li>
</ul>

Wie kann ich jetzt in der CSS Datei das li-Item der Klasse active und mit der ID de bearbeiten?
Ich hatte erst die Idee:

#menu ul li.active#de {
..
}

aber das funktioniert nicht

 

[nordx]

öhm... es reicht bereits wenn du folgendes machst:

<ul>
<li class="active">Deutschland</li>
</ul>

.active {
                  font-size:14px;
                  font-family:Trebuchet MS;
}

 

[Julexander]

Naja nicht ganz, die Liste sieht so aus:

<ul>
<li class="active" id="de">De</li>
<li id="en">Eng</li>
</ul>

Auf der deutschen Seite moechte ich nun den aktiven "De"-Link anders stylen (background image heller machen) als den En-Link, und das gleiche andersrum auf der Englischen Version.

 

[Giswald]

Geht nicht 2x class?

Oder fasse active und de zusammen.

Sorry, bin nicht der HTML Überflieger :>

 

[Elioth]

Das Aneinanderketten von Tags geht zwar, nicht jedoch das Aneinanderhängen verschiedener Punkt,Raute,Attr Verknüpfungen

Stattdessen machs besser so:

#menu ul li.active {
..
// erster Teil der CSS-Definition der für alle Spracheinträge gleich ist
zb heller, fette Schrift
}

#menu_de{
..
// zweiter (ergänzender) Teil der CSS-Definition der für deutsch speziell ist
z.B. Background flagge_german.png
}

CSS-Settings sind ja zum Glück "ergänzend".

Wenn Dir auch das nicht hilft, da Du CSS-Definitionen setzen willst,die sich gegenseitig überschreiben, hilft noch die Lösung mittels Attribut.

<ul>
<li class="active" id="de" mein_kennzeichen="de_act">Deutschland</li>
</ul>

li.active[mein_kennzeichen="de_act"] {
..
// Deine spezielle Definition für deutsch aktiv
}

 

[S.o.T.]

Wenn du dich mit CSS-Selektoren beschäftigst, wirst du feststellen, dass solche Selektoren sehr leistungshemmend sind.

Was spricht dagegen, einfach #de { blablablubb } zu schreiben?

 

[Julexander]

Ok danke fuer die Ratschlaege, habs jetz so geloest, dass ich dem <li> Element die .active Klasse zuschreibe und dem <a> Element die ID (de, en).

 

[Kagee]

auch wenns schon gelöst ist, müsste das aus dem obigen Beispiel nicht so heißen:

#menu ul li#de.active {
..
}

von dem Performance-Problem abgesehen.

 

[Trainmaster]

Mal wieder die Grundlagen ... eine ID ist einmalig, Zitat:

This attribute assigns a name to an element. This name must be unique in a document.

Aus diesem Grund:

#de {
    /* ... */
}

Nicht mehr und nicht weniger.

 

[S.o.T.]

Mal wieder die Grundlagen ... eine ID ist einmalig, Zitat:

Aus diesem Grund:

#de {
    /* ... */
}

Nicht mehr und nicht weniger.

Danke, dass du das noch einmal so kurz und knapp auf den Punkt gebracht hast!