tabcontrol - verschiedenfarbige Reiter

[VolkerS]

Hallo,

ich möchte die TabControl-Reiter unterschiedlich einfärben, selected und nicht selected.
In der Quelltextansicht ist ja auch jeder Reiter mit einer ID versehen. Trotzdem ist das nicht so easy wie gedacht.

etwa so:

.tabcontrol_tabs li#1193_0.selected {background: .....;}

Wo ist der Denkfehler?

Beste Grüße
Volker

[lomex]

Lass einfach die ID weg.

.tabcontrol_tabs li { farbe1} 
.tabcontrol_tabs li.selected { farbe2}

[VolkerS]

Ich will ja die Reiter einzeln ansprechen: verschiedene Farben!
Da sollte doch die ID ganz nützlich oder gar Bedingung sein?

Da ich zwei solche Module auf einer Seite habe, muss es auch da eine Abgrenzung geben.

[mlweb]

Ganz allgemein, wenn Du ein Element über die ID ansprichst ist diese in den allermeisten Fällen bei sauberem css ausreichend (mal abgesehen vielleicht von der Unterscheidung des Status), weil sie ja eindeutig zu sein hat und auch in der Spezifität mit 100 Punkten meist allein hoch genug ist. ".tabcontrol_tabs li" wäre dann m.E. entbehrlich.
Wenn bei Dir das css nicht so greift wie erwartet ist ein Link hilfreich, damit man sehen kann woran es liegt.

[VolkerS]

das mit der ID sehe ich auch so, trotzdem komme ich nicht weiter.
http://pop.mediafactum.net/ unter der Säulen-Grafik

<div id="tabcontrol_1193" class="ce_tabcontrol block">   
<div class="tabcontrol_tabs block">
    <ul>
                    <li class="tabs tab_0" id="1193_0">History of Paper</li>
                    <li class="tabs tab_1" id="1193_1">Culture and Art</li>
                    <li class="tabs tab_2" id="1193_2">Ecology and Recycling</li>
                    <li class="tabs tab_3" id="1193_3">Economy and Stonepaper</li>
                    <li class="tabs tab_4" id="1193_4">Electronic Future</li>
            </ul>
</div>

<div class="tabcontrol_panes block"> ..... </div>

CSS

#1193_0.selected {
    background-color:#e82623;
}

[VolkerS]

Anmerkung:

ich hatte den Selector von der Chrome-Untersuchen-Funktion übernommen; daher anfangs der lange Selector.
wie im HTML-Code zu sehen: die Klasse selected ist nicht vorhanden und wird wohl dynamisch von jQuery erzeugt.
Ohne .selected ist der CSS-Code genauso unwirksam.

Ein weiterer Punkt ist, dass CSS-Statements trotz Selector mit ID des Moduls tabcontrol_1193 sich auch auf das darunterliegende Modul auswirkt.

Da kann man schon mal an sich zweifeln.

[mlweb]

Das eine Problem liegt mit ziemlicher Sicherheit daran, dass IDs in css nicht mit Zahlen beginnen dürfen. Im Firefox habe ich da ein escaptes Zeichen vorweg. Glaube es ist ein Doppelkreuz. Damit funktioniert es auch.
Ich kenne die Erweiterung nicht, weiss also nicht ob bzw. wie Du Einfluß auf die ID nehmen kannst.

#\31 193_1 {
    background: blue;
}

Nachtrag: Habe dazu auch gerade bei Google etwas dazu gefunden https://mothereff.in/css-escapes

[mlweb]

Ein weiterer Punkt ist, dass CSS-Statements trotz Selector mit ID des Moduls tabcontrol_1193 sich auch auf das darunterliegende Modul auswirkt.

Das ist aber korrekt. VomSeitenquelltext und vom im Browser interpretierten Code her liegt die zweite tabgruppe genauso innerhalb von tabcontrol_1193.

[planepix]

Hallo Volker,

der Tipp von Maren ist gut und wichtig.
Der Code-Inspektor von Firefox wandelt das auch gleich automatisch um.

Wenn du das so einträgst, werden die Tabe verschiedenfarbig:

li#\31 193_0.tabs.tab_0 {background:blue;}
li#\31 193_1.tabs.tab_1 {background:red;}
li#\31 193_2.tabs.tab_2 {background:yellowgreen;}
li#\31 193_3.tabs.tab_3 {background:lime;}
li#\31 193_4.tabs.tab_4 {background:purple;}

[VolkerS]

@mlweb
Hallo mlweb,

(Der Punkt mit den 2 IDs ist jetzt nicht mehr so wichtig.)

Das war ein superheißer Tipp!
Die Erweiterung verwende ich schon sehr lange. Dass sie ungültige Selektoren erzeugen könnte, kam mir nicht in den Sinn.
Auf das Escapen wäre ich alleine nicht gekommen. Vielen Dank!

@planepix
Auch dir vielen Dank für die Mühe mit der Demo.
Anscheinend lohnt es sich doch, auch mal wieder den Firefox herauszukramen.

Beste Grüße
Volker