CSS: Attributbedingte Formate bei class

Computer: Software & Programmierung HTML & CSS
#1

Hallo an alle,

unter http://de.selfhtml.org/css/formate/zentrale.htm#attr… habe ich etwas recht feines gefunden, nur geht das nicht so wie ich es möchte.

In einem Kalender (tabelle) haben die einzelnen Tage jeweils eine eigene Klasse gegeben

Verwendung finden bei mir „WT00“ bis „WT05“ (Werktag), „SA00“ bis „SA05“ (Samstag), „SO00“ bis „SO05“ (Sonntag) und „FT00“ bis „FT05“ (Feiertag) demzufolge 24 Klassen (wobei das noch auf 80 Klassen erweitert werden soll also bis __20)

die Schriftformatierung ist abhängig vom Tag WT_=schwarz, SA_=rot, SO_=rot,dick … und die Hintergrundgrafik ist abhäng von der Zahl
__00=bild00.gif __01=bild01.gif …

Derzeit habe ich 24 css Einträge die alle „ähnlich“ sind gibt es irgendeine Möglichkeit das mit Attributbedingte Formate zu realisieren?

so geht es bei mir nicht:
div#tabelle td[class~=WT]{
color:schwarz;
…
}
und mit ist das html nicht mehr valide.

Ich hoffe das ihr mir helfen könnt.

Mit freundlichen Grüßen
Stefan

#2

Hallo Stefan,

es geht um attributabhängige Selektoren.

hierbei kann man jedes beliebige Attribut hinzufügen, sogenannte custom-attribute.

z.b.

jetzt kannst Du sowohl über die class, als auch über das Attribut WT selektieren. Dabei muss WT kein Value haben.

td [WT]{color:red}

Gruß
Klaus

#3

Hallo Stefan,

Du kannst Klassen beliebig kombinieren. Zwischen die Klassennamen gehört ein Leerzeichen, bei widersprüchlichen Anweisungen gewinnt die aus der zuletzt notierten Klasse.

Gruß
Yasmin

#4

hallo you,

und wie kommst du jetzt damit klar??

mfg - KKO

#5

Hallo KKO,

ich habe im Moment noch die gesamten Klassen in css einzeln definiert, werde aber sobald ich das ganze ausbaue auf euren Rat zurückgreifen.

Danke

Stefan

#6

Hallo Stefan Behrendt,

ich habe im Moment noch die gesamten Klassen in css einzeln
definiert, werde aber sobald ich das ganze ausbaue auf euren
Rat zurückgreifen.

Unser Rat möge Dir behilflich sein!!

OOOOOOOMMMMMM

KKO

#7

Hallo KKO,

habe das ganze nun mal bei einer anderen Seite angewendet geht super
css:
.bild{hieght und wight …)
.sA - .sG{left} 'Spalte
.z1 - .z5{top} 'Zeile

und dann mit class=„bild sA z4“ eingebunden (aufbau wie mit den Zeilen und Spalten in Tabellenkalkulation)

nochmals danke
Stefan

#8

Hallo Stefan,

und dann mit class=„bild sA z4“ eingebunden (aufbau wie mit
den Zeilen und Spalten in Tabellenkalkulation)

so geht es natürlich auch
Du weist dem element mehrere classnames zu, was aber nichts mit attributbedingter Selektion zu tun hat :smile:

Gruß
Klaus

#9

.sA - .sG{left} 'Spalte
.z1 - .z5{top} 'Zeile

das funktioniert nur im IE !!!

#10

Hallo KKO,

.sA - .sG{left} 'Spalte
.z1 - .z5{top} 'Zeile

Sorry das ist nur die Kurzform
bei mir steht schon

.sA{left: 55px;}
.sB{left:155px;}
.sC{left:255px;}
…

Cu Stefan

#11

Hallo Stefan,

.z1 - .z5{top} 'Zeile

diese .von - .bis -Syntax funktioniert tatsächlich im IE, aber nur da.
Kann ja sein, dass Du mit IE die Seite testest und dann fällt es Dir nicht auf :smile:)

bei mir steht schon
.sA{left: 55px;}

na dann ist ja gut

Gruß
Klaus