Enrico: (Ergänzung) Listenelemente bei :not(...) speziell kennzeichnen

Beitrag lesen

Als Ergänzung:

so sieht ein Menü aus:

<ul class="untermenueBand">
   <li id="mitglieder"></li>
   <li id="biografie"></li>
   <li id="bewerbung"></li>
   <li id="pressKit"></li>
   <li id="stageRider"></li>
</ul>

Die optische Auszeichnung erfolgt dann über Zuweisung einer jeweiligen Klasse, die aus der ID ("mitglieder", "biografie",...) samt Kennzeichen für die Sprache ("D" oder "E") und des Status ("Aktiv" ohne hover-Effekt, "NichtVerfuegbar" für nicht anklickbare Links bzw. ganz ohne Status für verfügbare Links).

ul.untermenueBand li,
...weitere Menüs...
{
   background-position: top left;
   background-repeat:   no-repeat;
   cursor:              pointer;
   height:              20px;
   width:               100%
}

...weitere Definitionen...

.bewerbungD,
.bewerbungDNichtVerfuegbar,
.bewerbungDAktiv
{
   background: url(../grafiken/textlinkUntermenueBewerbungD.png)
}

.bewerbungE,
.bewerbungENichtVerfuegbar,
.bewerbungEAktiv
{
   background: url(../grafiken/textlinkUntermenueBewerbungE.png)
}

ul.untermenueBand li:not([class$=NichtVerfuegbar]):hover,
...weitere Definitionen...
{
   background-position: 0 -20px
}

Gruss Enrico