zwei Klassen für ein Element

[stefan]

Hallo Miteinander.

Ich bin mir sicher, dass es in SelfHTML einen Artikel wird, wo das Thema abgehandelt wird, auch ist es sicher in diesem Forum schon mal diskutiert worden, da ich jedoch auch nach längerer Suche nichts passendes gefunden habe, frage ich nochmal selber nach:

Ich möchte für ein <div>-Element zwei verschiedene CSS-Klassen definieren. Google liefert dazu folgendes:

http://www.css-praxis.de/forum/board_entry.php?id=89&amp;page=0&amp;category=all&amp;order=subject&amp;descasc=ASC

gemäss w3c soll es möglich sein, einem element
  mehrere klassen zu zuweisen, die mit einem leerschlag
  getrennt werden.

<!-- core attributes common to most elements
  id document-wide unique id
  class space separated list of classes
  style associated style info
  title advisory title/amplification
  -->

class="head main"

wobei .head und .main je eine separate klasse ist.

Genau so hatte ich es auch in Erinnerung, bloss funktioniert es bei mir (unter neuerem Mozilla, release-Nummer find ich grad nicht) nicht. Die einzige Idee, die mir grad einfällt ist, dass es mit meinen CSS angeben zusammenhängt. Hier also mein Code:

CSS:

.inhalt{padding:1em 1em 0 1em;}

div[class="inhalt"]{
  width:auto !important;
  max-width:45em;
  }

.monatsarchiv a img{
  border:none !important;
  border-top:2px solid #FFF !important;
  border-right:2px solid #FFF !important;
  }

HTML:

<div class="inhalt monatsarchiv">
  [...]
  </div>

Das padding von .inhalt wird angezeigt, nicht aber das max-width. Bei <div class="inhalt">[...]</div> wird es jedoch angezeigt.

Weiss jemand Rat?

Ich freu mich über Antworten oder Links. Danke im Voraus.

Nette Grüße,
stefan

[at]

Hallo.

div[class="inhalt"]

trifft nicht auf

<div class="inhalt monatsarchiv">

zu (http://de.selfhtml.org/css/formate/zentrale.htm#attributbedingte).
MfG, at

[stefan]

Hallo at.

div[class="inhalt"]

trifft nicht auf

<div class="inhalt monatsarchiv">
zu

Ahh, stimmt.

(http://de.selfhtml.org/css/formate/zentrale.htm#attributbedingte).

Muss ich mich mal reinlesen. Danke für die Antwort. Ich melde mich nochmal (zwecks Archiv) wenn ich weiss, wie ichs ändern kann.

Nette Grüße,
stefan

[stefan]

Hallo.

Ich melde mich nochmal (zwecks Archiv) wenn ich weiss, wie ichs ändern kann.

So gehts:

entweder

div[class~="inhalt"]{...}

oder

div[class="inhalt"],
   div[class="inhalt monatsarchiv"]{...}

Ich hab mich für die erste Lsg. entschieden: http://your-boredom.de/2004-archiv.shtml

In Mozilla und Opera funktionierts.

Grüße,
stefan

[Konrad L. M. Rudolph (unauth)]

Moin,

div[class="inhalt"]{

Gibt es einen speziellen Grund, dass Du nicht div.inhalt schreibst? Wenn ich letzteres schreibe, klappt es bei mir nämlich auf wundersame Weise. :-)

lg, Konrad -

[stefan]

Hallo Konrad.

div[class="inhalt"]{

Gibt es einen speziellen Grund, dass Du nicht div.inhalt schreibst? Wenn ich letzteres schreibe, klappt es bei mir nämlich auf wundersame Weise. :-)

Ja, da der IE max-width nicht kennt, sollte er auch nichts davon mitbekommen, also wollte ich es mittels Browserweiche vor ihm "verstecken".

Dort liegt aber auch der Ursprung des Problems (siehe das Posting von at). Muss ich mich mal reinlesen. Danke für die Antwort.

Nette Grüße,
stefan

[Gunnar Bittersmann]

Ja, da der IE max-width nicht kennt, sollte er auch nichts davon mitbekommen, also wollte ich es mittels Browserweiche vor ihm "verstecken".

stefan,
Da er max-width nicht kennt, brauchst du's auch nicht verstecken.
Gunnar

[Christian Seiler]

Hi Gunnar,

Ja, da der IE max-width nicht kennt, sollte er auch nichts davon mitbekommen, also wollte ich es mittels Browserweiche vor ihm "verstecken".

Da er max-width nicht kennt, brauchst du's auch nicht verstecken.

Aber die width:auto;-Angabe muss man dann dennoch vor'm IE verstecken.

Viele Grüße,
Christian

[Christian Seiler]

Hallo stefan,

div[class="inhalt"]{

Gibt es einen speziellen Grund, dass Du nicht div.inhalt schreibst? Wenn ich letzteres schreibe, klappt es bei mir nämlich auf wundersame Weise. :-)

Ja, da der IE max-width nicht kennt, sollte er auch nichts davon mitbekommen, also wollte ich es mittels Browserweiche vor ihm "verstecken".

div.inhalt[class] wäre außer div[class~="inhalt"] auch noch eine Möglichkeit.

Viele Grüße,
Christian

[MudGuard]

Hi,

div[class="inhalt"]{
  <div class="inhalt monatsarchiv">

siehe http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors:

[att=val]
    Match when the element's "att" attribute value is exactly "val".

das class-Attribut ist nicht exakt "inhalt" - also kann das nicht funktionieren.
Lösungsmöglichkeit:

[att~=val]
    Match when the element's "att" attribute value is a space-separated list of "words", one of which is exactly "val". If this selector is used, the words in the value must not contain spaces (since they are separated by spaces).

cu,
Andreas

[stefan]

Hallo Andreas.

Lösungsmöglichkeit:

[att~=val]

Bin ich auch grad draufgekommen. Danke.

Nette Grüße,
stefan