Zugriff auf CSS-direktformatierte Elemente

[Gunnar Bittersmann]

@@Nitnatsnok:

nuqneH

div.text > div > div[style=float:left;]{...}
div.text > div > div[style=float:left]{...}

“Attribute values must be identifiers or strings.” [CSS21 §5.8.1] “Strings can either be written with double quotes or with single quotes.” [CSS21 §4.3.7]

Das kann also wegen fehlender Anführungszeichen nicht gehen.

div.text > div > div[style='float:left']{...}

Sieht schon besser aus. Im Quelltext hattest du aber <div style="float:left;"> mit Semikolon.

Wie dem auch sei: Browser haben ihre eigene interne Repräsentation von Inline-Styles. Firefox bspw. mit Leerzeichen nach dem Doppenpunkt und einem Semikolon am Ende; dieser Selektor greift:

div.text > div > div[style='float: left;']{...}

(Er würde auch greifen, wenn im HTML kein Semikolon stünde <div style="float:left">.)

Andere Browser mögen da andere interne Repräsentationen haben, sodass dies wohl nicht browserübergreifend brauchbar ist.

div.text > div > div[style~=left]{...}

“Represents an element with the att attribute whose value is a white space-separated list of words […]” [CSS21 §5.8.1] "float:left;" ist keine Liste mit durch Leerzeichen voneinander getrennten Wörtern.

(Allerdings ist es die interne Repräsentation im Firefox doch (s.o.), allerdings ist das zweite Wort "left;" mit Semikolon.

div.text > div > div[style~="left;"]{...}

funktioniert im Firefox. Häh? Was ist mit dem Doppelpunkt von "style:"?)

div.text > div > div[style|=float]{...}

“Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D).” [CSS21 §5.8.1]

Nach "style" steht kein "-" (U+002D). Das kann also nicht gehen.

Dir genügt es also abzufragen, ob im 'style'-Attribut (als erstes) 'float' kommt? CSS 3 [CSS3-SELECTORS §6.3.2] bietet dazu einen geeigneten Attributselektor (den wohl auch alle Browser unterstützen, die überhaupt Attributselektoren unterstützen):

div.text > div > div[style^="float"]{...}

Wofür stehen eigentlich die drei Punkte? Du willst nicht etwa den Wert 'float'-Eigenschaft überschreiben? Wegen der Spezifität der Selektoren: keine Chance. [CSS21 §C.2.31]

Qapla'