Thomas Horster

eat the cookie before the cookie eats you

Wie man inline styles in CSS überschreiben kann

| 3 Kommentare

Wenn man inline Styles überschreiben, macht man das mit !important, will man aber nur inline gestylte Tags in CSS im Webdesign überschreiben, gibt es keine andere Möglichkeit, als diese styles direkt anzupassen? Falsch!
Eine weitere Möglichkeit ist mit Hilfe des [style] Keywords innerhalb eines Scriptblockes oder einer externen CSS nur diese Tags mit inline Styles anzusprechen.

Ein Beispiel :

<div class="showMe">
<span style="font-weight: bold; color: #ff0000;">Hello World - wird gestyled</span>
</div>
<div class="showMe">
<span>Hello World - wird nicht gestyled</span>
</div>
.showMe span[style]{font-weight: normal !important;color: #0000ff !important;}

Wie das immer so ist und wie man sich wahrscheinlich aufgrund des [style] im Selektor denken konnte, funktioniert dies nicht im IE6, aber im IE7 & IE8 sowie allen modernen Browsern.
Natürlich bleibt die Frage, wann man so etwas sinnvoll anwenden kann, da man inline styles generell vermeiden
sollte, aber es kann mit Sicherheit nicht schaden, so etwas zu wissen.

Seeing is believing, daher gibt es hier ein kleines Showcase.

[gefunden bei SOTAHNAKA]

Verwandte Artikel:

  1. Flex 3 Beta 2 ist draußen Seit 1. Oktober kann man sich die neue Flex 3...
  2. Adobe Thermo Auf der Adobe MAX Konferenz in Chicago wurde nun Thermo...
  3. Facebook secrets – what you where afraid to ask [Source: Online PhD Programs for Mashable.com]...
  4. Adobe Flex Demo Applikation Im Moment nicht erreichbar, sorry! Im Rahmen meiner Diplomarbeit zum...
  5. JavaScript Miniframework You can find a testrun here: http://jsfiddle.net/ZjsYB/ Based on a...

Autor: Tom

I am Jack's evil father!

3 Kommentare

  1. hi,

    habe eben ewig versucht so ein span zu überschreiben und dann endlich mal google bemüht, deinen tipp hier gefunden und war gleich alle sorgen los.

    tausend dank. ;-)

    gruß oputz

  2. geil, genau das hab ich gesucht! …fettes danke! :)

  3. <3-lichsten dank!

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.