CSS Selektoren richtig adressieren

[CKern]

Hallo Zusammen,

ich tue mir gerade mit den CSS Selektoren schwer.

Ausgangssituation.
(a) Ich benutze Events auf meiner Seite (im Kalender, Listen, etc.)

• Hierzu habe ich u.a. für das Datum ein CSS-Style erstellt mit dem Selektor
  .mod_eventlist .layout_upcoming .date
• Dem Datum gebe ich dann links und rechts ein Border=1. Auf der Seite sieht das dann so aus:
  | 28.10.2012 | Event-Titel ......

(b) Ich habe eine Sidebar auf meiner Webseite.

• Dort möchte u.a. ich die nächsten 3 Events anzeigen.
• Hierzu habe ich ein Frontend-Modul erstellt mit Modultyp "Eventliste", "Alle zukünftigen Events", "absteigend", Anzahl an Events=3, Event-Template = event_upcoming
• Dann noch 2 weitere FE-Module (Zufallsbild und Quicklink) für die sidebar erstellt
• Ein FE-Modul mit Namen sidebar erstellt (eigenes HTML) und dort die 3 FE-Module mit dem inserttag insert_module eingetragen. Diesem FE-Modul habe ich eine CSS-Klasse sidebar mitgegeben.
• Das FE-Modul sidebar dann im Layout mit Spalte = right eingetragen.

Problem:
Es wird natürlich erstmal in der sidebar der CSS-Style für mein Event-Datum übernommen. Aber in der Sidebar soll rechts und links neben dem Datum kein (!) Balken angezeigt werden.
Ich weiß nicht, wie ich das Event-Datum in der sidebar anders formatieren kann, als in der Hauptspalte
Wenn ich das Event-Datum in der Sidebar "untersuche", dann ist der DIV-Aufbau ungefähr wie folgt:

<div #Wrapper>
<div #container>
<div #right>
<div .sidebar>
<div .mod_eventlist>
<div .layout_upcoming>
<span class="date">28.10.2012</span>

wie muss ich den Selektor aufbauen, damit ich genau das date formatieren kann.


Gibt es vielleicht irgendwo ganz grundsätzlich eine gute Erläuterung, wie die CSS-Selektoren in so einer geschachtelten Situation aufzubauen sind.

Viele Grüße

[dackelchen]

Hast Du vl. einen Link zur Seite. Das würde das Erklären vereinfachen. Generell baust Du das CSS immer von außen nach innen auf, dabei überschreibt die letzte Anweisung im CSS die übergeornete.

In Deinem Beispiel:

<div #Wrapper>
<div #container>
<div #right>
<div .sidebar>
<div .mod_eventlist>
<div .layout_upcoming>
<span class="date">28.10.2012</span>

würdest Du zeuerst .sidebar definieren, und Zwar ohne "|", danach käme .eventlist mit "|". Dabei stehen im CSS die Anweisungen zu .sidebar über denen von .eventlist.

Falls Du Literatur dazu suchst... ich habe mit "little boxes" von Peter Müller gelernt. In seinem anderen Buch "Websites erstellen mit Contao ist auch einiges drin, wie das CSS ins Contao kommt, ob Das in Deinem Fall aber hilft, weiß ich nicht.

Ach noch etwas. Dass Deine Schreibweise falsch ist und <div> in einer CSS nichts zu suchen hat, weißt Du?

[jubel]

Ergänzung:
Genaugenommen benötigst du .sidebar gar nicht, denn die ist schon durch die ID #right definiert (wird übersichtlicher ohne).

Wenn du deine Linien in der Sidebar wegnehmen willst, genügt auch z.B.

#right .mod_eventlist .layout_upcoming .date {
border: 0;
}

Durch die höhere Spezifität wird der allgemein definierte Rand rechts und links automatisch überschrieben.

Dackelchens Buch-Empfehlungen sind auf jeden Fall serh hilfreich!

[CKern]

Ich danke euch beiden ganz herzlich.
Eure Hinweise haben mir geholfen und ich konnte meinen Gedankenknoten lösen !!

... eine Frage hätte ich noch:
Macht es einen unterschied ob ich im Selektor schreiben .klasse1.klasse2 oder .klasse1 .klasse2 (einmal ohne und einmal mit Leerzeichen dazwischen)

Viele Grüße

[CeeKay]

Ja macht es. .foo.bar trifft Elemente, die sowohl die Klasse .foo wie auch die Klasse .bar haben. .foo .bar dagegen alle Elemente mit der Klasse .bar, die Nachfahren von einem Element mit der Klasse .foo sind. Ich empfehle http://jendryschik.de/wsdev/einfuehrung/css/selektoren für weitere Infos.