ist "#id.class" / ".class#id" valide?

[David]

Ist es valides CSS, wenn ich als Selektor eine Klasse und eine Id verknüpfe, beispielsweise so:
div#id.class {
     css...
}
oder umgekehrt (div.class#id)?

Es funktioniert zumindest in Firefox, Opera 8, IE 6 und Konqueror und auch der Validator
auf http://jigsaw.w3.org/css-validator/ beschwert sich nicht, aber das muss ja nichts heißen.

Gruß, David

[MudGuard]

Hi,

Ist es valides CSS, wenn ich als Selektor eine Klasse und eine Id verknüpfe, beispielsweise so:
div#id.class {
     css...
}
oder umgekehrt (div.class#id)?

Klar. Nur wozu? Da die id dokumentweit eindeutig sein muß, braucht es in den allermeisten Fällen nicht mehr als Selektor.
Wenn für dieselbe id in verschiedenen Dokumenten verschiedene Formatierungen gelten sollen, würde ich eher den betroffenen Dokumenten noch eine id im body-Element spendieren und dann per
#spezialdokument #id
selektieren.

cu,
Andreas

[David]

Also, es ist eine etwas komplexere Geschichte:
es geht um dynamisch erstellte Seiten.
Die Navigation lese ich aus einer XML-Datei, was in eine hierarchisch geordnetes System aus ungeordneten Listen umgesetzt wird.

Das System soll so variabel wie möglich geschrieben werden, um zu ermöglichen, schnell neue Stylesheets für die Geschichte zu schreiben.

Bekanntermaßen komme ich, um einen Effekt wie die "suckerfish-dropdowns" zu erzielen, im IE nicht ohne Javascript aus, vermittels dessen der Klassenname eines Listenelements z.B. um "hover" ergänzt wird, sobald es mit der Maus überfahren wird.

Gleichzeitig möchte ich die Möglichkeit offenhalten, für verschiedene Bereiche einer Site verschiedene Farbvarianten zu definieren (per body-id), was auch in der Navigation zu sehen sein soll. Dazu vergebe ich per PHP eindeutige ids für die Listenpunkte der Navigation. Dann kommt aber noch die Markierung des aktuellen Navigationspunktes. Eine id geht nicht, da ja schon vergeben. Eine Klasse alleine geht nicht, da die Angaben durch die Definitionen der Id überschrieben werden.
Die eindeutigen Bezeichnugen kann ich leider nicht als Klasse definieren, da man ja sonst mit dem IE in Teufels Küche kommt, wenn solche Listenpunkte beim überfahren nicht mehr z.B. die Klasse "home" sondern "homehover" haben, das wird halt irgendwann sehr unübersichtlich.

Alternativ geht natürlich noch #bodyid #navid {} zur Markierung der aktuellen Seite... ich muss noch mal über das ganze Design nachdenken, irgendwie wird das alles zu unübersichtlich...

[David]

Ahhhh ... Idee *pling*.
Einfach den aktuellen Navigationspunkt immer mit #current (oder so) bezeichnen und auf dessen individuelle id verzichten.
Dann individuelle Unterseiten-Farbe (oder was auch immer) mit #bodyid #current festlegen...

[Ashura]

Hallo David.

Einfach den aktuellen Navigationspunkt immer mit #current (oder so) bezeichnen und auf dessen individuelle id verzichten.

Warum nicht <strong>?
Damit kannst du komplett auf die ID verzichten und mittels Selektoren darauf zugreifen.

Gruß, Ashura

[David]

Hallo Ashura,
grundsätzlich eine gute Idee, allerdings ist es dann z.B. nicht möglich für das entsprechende <li>-Element andere CSS-Angaben zu machen.
Wenn ich habe:
<ul id="#navigation>
...
    <li>
        <strong>
            <a href="aktuell">Aktuell</a>
        </strong>
    </li>
...
</ul>

müsste man das strong-Element so formatieren:
#navigation strong {
    display: display des li-Elementes;
    margin: negatives padding des li-Elementes;
    padding: padding des li-Elementes;
}
Das ist grundsätlich natürlich kein Problem, allerdings ist es aber nicht mehr wirklich Newbie-freundlich (für neues css). Auf der anderen Seite ist die ganze Geschichte schon jetzt nicht Newbie-freundlich ...
Vielleicht mache ich es tatsächlich mit dem <strong>-Element.

Gruß, David

[Ingo Turski]

Hi,

Vielleicht mache ich es tatsächlich mit dem <strong>-Element.

das solltest Du, wobei ein span auch ginge. Nur solltest Du dioes _anstelle_ von A verwenden, sofern sich dessen href auf die angezeigte Seite bezieht.
Die Definition im CSS ist dadurch auch nicht viel komplizierter:
#navigation a, #navigation span {} /* oder strong */

freundliche Grüße
Ingo

[Cyx23]

Hallo David,

Alternativ geht natürlich noch #bodyid #navid {} zur Markierung der aktuellen Seite... ich muss noch mal über das ganze Design nachdenken, irgendwie wird das alles zu unübersichtlich...

der Ansatz ist m.E. schon praktikabel.

Und auch ein per CSS besonders gekennzeichneter Link auf die eigene
Seite hat m.E. Vorteile, nur kann dann wohl eine zusätzliche
Markierung für Screenreader oder andere Browser ohne CSS noch
wichtiger sein, etwa durch einen vorgestellten per CSS versteckten
span mit Zusatztext a la "Standort: ", womit du auch da letztlich
die Navigation an die jeweilige Seite anpassen mußt wenn du die
CSS-Mängel ausgleichen willst, kann aber vielleicht z.B. über die
URI der ausgelieferten Datei automatisiert werden.

Grüsse

Cyx23

[David]

Hallo Cyx23,

Und auch ein per CSS besonders gekennzeichneter Link auf die eigene
Seite hat m.E. Vorteile, nur kann dann wohl eine zusätzliche
Markierung für Screenreader oder andere Browser ohne CSS noch
wichtiger sein, etwa durch einen vorgestellten per CSS versteckten
span mit Zusatztext a la "Standort: ",

Das heißt zur Zeit: span {display: block; height: 0; width: 0;}, weil viele Screenreader "display: none" auch ausblenden. media="aural" funktioniert ja auch nicht, wie es soll, richtig?

womit du auch da letztlich
die Navigation an die jeweilige Seite anpassen mußt wenn du die
CSS-Mängel ausgleichen willst, kann aber vielleicht z.B. über die
URI der ausgelieferten Datei automatisiert werden.

Ja, dass ist kein Problem.

Gruß, David

[Cyx23]

Hallo David,

Das heißt zur Zeit: span {display: block; height: 0; width: 0;}, weil viele Screenreader "display: none" auch ausblenden. media="aural" funktioniert ja auch nicht, wie es soll, richtig?

so etwa, vielleicht auch noch mit @media screen, sollte es wohl
eigentlich richtig sein:

span.wai{display:none;}
@media aural, braille{ span.wai{display:block;} }

Und so scheint es mir derzeit für möglichst viele Browser
praktikabel (mit Anpassung für Netscape 4):

span.wai, span.wai a{display:none;margin:0;padding:0;border:0;}
* span.wai, * span.wai a{position:absolute;
overflow:hidden;display:inline;left:-1000px;top:-1000px;
width:0px;height:0px;}

Grüsse

Cyx23