Selektoren/Mehrere Klassen

[Marietta]

Guten Abend, Selfforum!

Ich vergebe einem Element, so wie in dem Link beschrieben, zwei statt nur einer Klasse:

http://css.maxdesign.com.au/selectutorial/selectors_class.htm#multiple

Ich kann das Element jetzt zwar, wie im Beispiel beschrieben, auf folgende Art und Weise manipulieren:

.big { font-weight: bold; }
.indent { padding-left: 2em; }

Gibt es denn aber auch eine Syntax, die mir einen "kombinierten" Selektor ermöglicht? Mit anderen Worten: der Selektor soll nur dann wirken, wenn BEIDE Klassen vergeben wurden!

Ich stelle mir das dann in etwa so vor:

<p class="big indent">

big {
    padding-left: 4em;
  }

big+indent {
    font-weight: bold;
    padding-left: 2em;
  }

"big+indent" würde dabei die in "big" definierten Auszeichnungen überschreiben, das padding-left folglich "2em" sein.

Wenn es so etwas gibt: ab welcher CSS-Version?

Wenn es so etwas nicht gibt, schliesse ich die konzeptionelle Frage an: Warum nicht, macht es keinen Sinn, löst man das anders?

Danke für jede Anregung,
Marietta

[Cheatah]

Hi,

.big { font-weight: bold; }
.indent { padding-left: 2em; }
Gibt es denn aber auch eine Syntax, die mir einen "kombinierten" Selektor ermöglicht?

sicher doch. Das funktioniert ganz genau so, als würdest Du ein <div> mit einer bestimmten Klasse ansprechen wollen.

big {

Dies selektiert ein <big>-Element. Welcher Selektor steht für ein <irgendwas class="big">?

big+indent {

Dies selektiert ein <indent>-Element, welches direkt auf ein (abgeschlossenes) <big>-Element folgt.

Wenn es so etwas gibt: ab welcher CSS-Version?

Wenn ich mich nicht irre ab CSS/1.0.

Cheatah

[Marietta]

Hallo Cheatah,

sicher doch. Das funktioniert ganz genau so, als würdest Du ein <div> mit einer bestimmten Klasse ansprechen wollen.

Ok, dann anders:

ich habe zwei Elemente:

<div class="c1 c2">...</div>
<div class="c1 c3">...</div>

Das ist der Output aus einem CMS, ich habe darauf keinen Einfluss.

Die Kombination "c1 c2" soll anders behandelt werden als die Kombination "c1 c3".

c1 wird allerdings für sehr viele unterschiedliche Elemente im Dokument genutzt, an dem entsprechenden Style kann ich also nicht fummeln.

Stell es Dir im Stylesheet so vor:
.c1 {
  height:10px;
  background-color:red;
}

.c2 {
  border-color:blue;
}

.c3 {
  border-color:yellow;
}

Für die Kombination aus c1 und c3 möchte ich nun, dass keine background-color gesetzt wird.

Dank+Grüsse, Marietta

[Orlando]

Hi Marietta,

Die Kombination "c1 c2" soll anders behandelt werden als die Kombination "c1 c3".
Für die Kombination aus c1 und c3 möchte ich nun, dass keine background-color gesetzt wird.

*.c1.c3 { ... }

Grüße,
 Roland

[Marietta]

Hallo Roland

Die Kombination "c1 c2" soll anders behandelt werden als die Kombination "c1 c3".
Für die Kombination aus c1 und c3 möchte ich nun, dass keine background-color gesetzt wird.

*.c1.c3 { ... }

Danke, werde es gleich mal ausprobieren!
Liebe Grüsse, Marietta